videojs集成--播放rtmp流
阿新 • • 發佈：2017-06-11
oot des head enter max size copyto meta 進行
之前說到已經把流推送過來了，這時候就可以使用videojs來進行顯示播放。
首先要先有一個文件，那就是video-js.swf
因為，這種播放方式html已經不能很好的進行播放了，需要用到flash來播放，videojs在這個地方就用到了這個。
代碼就是下面這樣。
裏面一些細節註釋都有。
重點就是看<video>標簽裏面的內容
[html] view plain copy
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Access-Control-Allow-Origin" content="*">
- <meta charset="utf-8">
- <meta name="description" content="Opencast Media Player">
- <meta name="author" content="Opencast">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <title>RTMP播放</title>
- <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">
- <link rel="stylesheet" type="text/css" href="css/core_global_style.css">
- <script src="videojs/jquery.js"></script>
- <script src="videojs/video.js"></script>
- <link href="videojs/video-js.css" rel="stylesheet">
- <script>
- videojs.options.flash.swf = "videojs/video-js.swf";//flash路徑，有一些html播放不了的視頻，就需要用到flash播放。這一句話要加在在videojs.js引入之後使用
- </script>
- </head>
- <body >
- <div id="engage_view" style="display: block;">
- <div id="engage_content">
- <div id="engage_resize_container">
- <div id="engage_video">
- <!-- theodul video videojs plugin desktop mode controls preload="auto"
- vjs-big-play-centered 播放按鈕居中
- poster默認的顯示界面，就是還沒點播放，給你顯示的界面
- controls
- preload="auto" 是否提前加載
- autoplay 自動播放
- loop=true 自動循環
- data-setup=‘{"example_option":true}‘ 可以把一些屬性寫到這個裏面來，如data-setup={"autoplay":true}
- -->
- <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
- poster="videojs/eguidlogo.png" width="800" height="600"
- >
- <!--
- <source src="../output.mp4" type=‘video/mp4‘> mp4格式
- <source src=‘rtmp://127.0.0.1/hls/test‘ type=‘rtmp/flv‘/> rtmp格式
- <source src=‘http://127.0.0.1/hls/test.m3u8‘ type=‘application/x-mpegURL‘/> m3u8格式
- <source src=‘http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8‘ type=‘application/x-mpegURL‘/> m3u8格式，可用
- -->
- <source src=‘rtmp://live.hkstv.hk.lxdns.com/live/hks‘ type=‘rtmp/flv‘/>
- </video>
- <!-- http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8 可用的m3u8地址 -->
- <!-- rtmp://live.hkstv.hk.lxdns.com/live/hks 可用的rtmp地址-->
- </div>
- </div>
- <!-- timeline plugin container -->
- </div>
- </div>
- <div class="clear"></div>
- <div id="information_wrapper">
- <!-- description plugin container -->
- <div id="engage_description"><!-- theodul description plugin desktop mode -->
- <div id="engage_basic_description"></div>
- </div>
- </div>
- <div class="tab-pane" id="engage_Slide_text_tab"><!-- theodul tab slidetext plugin embed mode -->
- </div>
- <script src="videojs/videojs-media-sources.min.js"></script>
- <!-- <script src="videojs/videojs-contrib-hls.min.js"></script>-->
- <script src="videojs/videojs.hls.min.js"></script>
- <script>
- //播放的話，就直接使用下面2行
- //後面註釋的那些其實也是可用用的，不過剛開始集成，越簡單越好
- var player = videojs(‘my-video‘);
- player.play();
- /*
- (function ($) {
- var resetVideoSize = function (myPlayer) {
- var videoJsBoxWidth = $(".video-js").width();
- var ratio = 1440 / 900;
- var videoJsBoxHeight = videoJsBoxWidth / ratio;
- myPlayer.height(videoJsBoxHeight);
- }
- $(window).on("resize", function () {
- resetVideoSize(myPlayer);
- });
- myPlayer.play();
- })(jQuery)
- function changeSrc() {
- var src = "http://127.0.0.1/hls/test.m3u8";
- var myPlayera = videojs("my-video");
- $("#my-video").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")
- myPlayera.src("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新初始化視頻地址
- myPlayera.load("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新加載
- }
- */
- function changeSrc(src) {
- var myPlayera = videojs("my-video");
- //$("#videojs_videodisplay_presentation_html5_api").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")
- myPlayera.src(src); //重新初始化視頻地址
- myPlayera.load(src); //重新加載
- }
- </script>
- </body>
- </html>
videojs集成--播放rtmp流