zoukankan      html  css  js  c++  java

  • videojs集成--播放rtmp流

    之前说到已经把流推送过来了，这时候就可以使用videojs来进行显示播放。

    首先要先有一个文件，那就是video-js.swf

    因为，这种播放方式html已经不能很好的进行播放了，需要用到flash来播放，videojs在这个地方就用到了这个。

    代码就是下面这样。

    里面一些细节注释都有。

    重点就是看<video>标签里面的内容

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta http-equiv="Access-Control-Allow-Origin" content="*">  
    5.     <meta charset="utf-8">  
    6.     <meta name="description" content="Opencast Media Player">  
    7.     <meta name="author" content="Opencast">  
    8.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
    9.     <title>RTMP播放</title>  
    10.     <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">  
    11.     <link rel="stylesheet" type="text/css" href="css/core_global_style.css">  
    12.     <script src="videojs/jquery.js"></script>  
    13.     <script src="videojs/video.js"></script>  
    14.     <link href="videojs/video-js.css" rel="stylesheet">  
    15.     <script>  
    16.         videojs.options.flash.swf = "videojs/video-js.swf";//flash路径，有一些html播放不了的视频，就需要用到flash播放。这一句话要加在在videojs.js引入之后使用  
    17.     </script>  
    18. </head>  
    19. <body >  
    20. <div id="engage_view" style="display: block;">  
    21.     <div id="engage_content">  
    22.         <div id="engage_resize_container">  
    23.   
    24.             <div id="engage_video">  
    25.                 <!-- theodul video videojs plugin desktop mode  controls preload="auto"  
    26.                         vjs-big-play-centered 播放按钮居中  
    27.                         poster默认的显示界面，就是还没点播放，给你显示的界面  
    28.                         controls  
    29.                         preload="auto" 是否提前加载  
    30.                         autoplay 自动播放  
    31.                         loop=true 自动循环  
    32.                         data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}  
    33.                 -->  
    34.                 <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"  
    35.                        poster="videojs/eguidlogo.png" width="800" height="600"  
    36.                 >  
    37.                     <!--  
    38.                         <source src="../output.mp4" type='video/mp4'>  mp4格式  
    39.                         <source src='rtmp://127.0.0.1/hls/test' type='rtmp/flv'/> rtmp格式  
    40.                         <source src='http://127.0.0.1/hls/test.m3u8' type='application/x-mpegURL'/>  m3u8格式  
    41.                         <source src='http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8' type='application/x-mpegURL'/> m3u8格式，可用  
    42.                     -->  
    43.                     <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/>  
    44.                 </video>  
    45.   
    46.                 <!-- http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8 可用的m3u8地址    -->  
    47.                 <!-- rtmp://live.hkstv.hk.lxdns.com/live/hks  可用的rtmp地址-->  
    48.             </div>  
    49.         </div>  
    50.         <!-- timeline plugin container -->  
    51.     </div>  
    52. </div>  
    53. <div class="clear"></div>  
    54. <div id="information_wrapper">  
    55.     <!-- description plugin container -->  
    56.     <div id="engage_description"><!-- theodul description plugin desktop mode -->  
    57.   
    58.         <div id="engage_basic_description"></div>  
    59.   
    60.     </div>  
    61. </div>  
    62. <div class="tab-pane" id="engage_Slide_text_tab"><!-- theodul tab slidetext plugin embed mode -->  
    63. </div>  
    64.   
    65. <script src="videojs/videojs-media-sources.min.js"></script>  
    66. <!-- <script src="videojs/videojs-contrib-hls.min.js"></script>-->  
    67. <script src="videojs/videojs.hls.min.js"></script>  
    68. <script>  
    69.   
    70.     //播放的话，就直接使用下面2行  
    71.     //后面注释的那些其实也是可用用的，不过刚开始集成，越简单越好  
    72.     var player = videojs('my-video');  
    73.     player.play();  
    74.     /*  
    75.     (function ($) {  
    76.   
    77.         var resetVideoSize = function (myPlayer) {  
    78.             var videoJsBoxWidth = $(".video-js").width();  
    79.             var ratio = 1440 / 900;  
    80.             var videoJsBoxHeight = videoJsBoxWidth / ratio;  
    81.             myPlayer.height(videoJsBoxHeight);  
    82.         }  
    83.   
    84.         $(window).on("resize", function () {  
    85.             resetVideoSize(myPlayer);  
    86.         });  
    87.         myPlayer.play();  
    88.     })(jQuery)  
    89.   
    90.     function changeSrc() {  
    91.         var src = "http://127.0.0.1/hls/test.m3u8";  
    92.         var myPlayera = videojs("my-video");  
    93.         $("#my-video").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")  
    94.         myPlayera.src("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新初始化视频地址  
    95.         myPlayera.load("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新加载  
    96.     }  
    97.     */  
    98.     function changeSrc(src) {  
    99.   
    100.         var myPlayera = videojs("my-video");  
    101.         //$("#videojs_videodisplay_presentation_html5_api").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")  
    102.         myPlayera.src(src); //重新初始化视频地址  
    103.         myPlayera.load(src); //重新加载  
    104.     }  
    105. </script>  
    106.   
    107. </body>  
    108. </html>  
  • 相关阅读:
    【郑轻邀请赛 G】密室逃脱
    【郑轻邀请赛 C】DOBRI
    【郑轻邀请赛 F】 Tmk吃汤饭
    【郑轻邀请赛 I】这里是天堂！
    【郑轻邀请赛 B】base64解密
    【郑轻邀请赛 A】tmk射气球
    【郑轻邀请赛 H】 维克兹的进制转换
    解决adb command not found以及sdk环境配置
    adb shell 命令详解,android, adb logcat
    Unexpected exception 'Cannot run program ... error=2, No such file or directory' ... adb'
  • 原文地址：https://www.cnblogs.com/lidabo/p/6980238.html
Copyright © 2011-2022 走看看