vod.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4. <title>Rtmp|HLS 点播测试器</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. </head>
  7. <body>
  8. <script type="text/javascript" src="/swfobject.js"></script>
  9. <script type="text/javascript" src="/ParsedQueryString.js"></script>
  10. <script type="text/javascript">
  11. var player = null;
  12. function loadStream(url) {
  13. player.setMediaResourceURL(url);
  14. }
  15. function getlink(url) {
  16. return "/vod.html?src=" + encodeURIComponent(url);
  17. }
  18. function jsbridge(playerId, event, data) {
  19. if (player == null) {
  20. player = document.getElementById(playerId);
  21. }
  22. switch(event) {
  23. case "onJavaScriptBridgeCreated":
  24. listStreams(teststreams,"streamlist");
  25. break;
  26. case "timeChange":
  27. case "timeupdate":
  28. case "progress":
  29. break;
  30. default:
  31. console.log(event, data);
  32. }
  33. }
  34. // Collect query parameters in an object that we can
  35. // forward to SWFObject:
  36. var pqs = new ParsedQueryString();
  37. var parameterNames = pqs.params(false);
  38. var parameters = {
  39. // src: "rtmp://192.168.0.10/live/demo",
  40. autoPlay: "true",
  41. verbose: true,
  42. controlBarAutoHide: "true",
  43. controlBarPosition: "bottom",
  44. poster: "images/poster.png",
  45. javascriptCallbackFunction: "jsbridge",
  46. plugin_hls: "/flashlsOSMF.swf",
  47. hls_minbufferlength: -1,
  48. hls_maxbufferlength: 30,
  49. hls_lowbufferlength: 3,
  50. hls_seekmode: "KEYFRAME",
  51. hls_startfromlevel: -1,
  52. hls_seekfromlevel: -1,
  53. hls_live_flushurlcache: false,
  54. hls_info: true,
  55. hls_debug: false,
  56. hls_debug2: false,
  57. hls_warn: true,
  58. hls_error: true,
  59. hls_fragmentloadmaxretry : -1,
  60. hls_manifestloadmaxretry : -1,
  61. hls_capleveltostage : false,
  62. hls_maxlevelcappingmode : "downscale"
  63. };
  64. for (var i = 0; i < parameterNames.length; i++) {
  65. var parameterName = parameterNames[i];
  66. parameters[parameterName] = pqs.param(parameterName) ||
  67. parameters[parameterName];
  68. }
  69. var wmodeValue = "direct";
  70. var wmodeOptions = ["direct", "opaque", "transparent", "window"];
  71. if (parameters.hasOwnProperty("wmode"))
  72. {
  73. if (wmodeOptions.indexOf(parameters.wmode) >= 0)
  74. {
  75. wmodeValue = parameters.wmode;
  76. }
  77. delete parameters.wmode;
  78. }
  79. // Embed the player SWF:
  80. swfobject.embedSWF(
  81. "GrindPlayer.swf"
  82. , "GrindPlayer"
  83. , 640
  84. , 480
  85. , "10.1.0"
  86. , "expressInstall.swf"
  87. , parameters
  88. , {
  89. allowFullScreen: "true",
  90. wmode: wmodeValue
  91. }
  92. , {
  93. name: "GrindPlayer"
  94. }
  95. );
  96. </script>
  97. <h1>Nginx-Rtmp-Server</h1>
  98. <p>
  99. <a href="/index.html">RTMP 直播测试器</a> <a href="/stat" target="_blank">RTMP 流监控</a> <a href="http://www.nodemedia.cn/" target="_blank">获取Android & iOS RTMP 开发SDK</a>
  100. </p>
  101. <div id="GrindPlayer">
  102. <p>
  103. Alternative content
  104. </p>
  105. </div>
  106. <br>
  107. <input id="userInput" value="rtmp://192.168.0.10/live/demo" size="80"> <button onclick="userSubmit()">Play RTMP or HLS Stream</button><br>
  108. <p>
  109. <script type="text/javascript">
  110. function userSubmit() {
  111. window.location = getlink(document.getElementById('userInput').value);
  112. }
  113. </script>
  114. </body>
  115. </html>