videojs集成--播放rtmp流

た入场券 2022-09-27 14:24 294阅读 0赞

[ ][Link 1]要是播不了的话，可以看下这篇文章。http://blog.csdn.net/cmqwan/article/details/76059703

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

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

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

代码就是下面这样。

里面一些细节注释都有。

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

<!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">
                    
                    <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
                           poster="videojs/eguidlogo.png" width="800" height="600"
                    >
                        
                        <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/>
                    </video>
    
                    
                    
                </div>
            </div>
            
        </div>
    </div>
    <div class="clear"></div>
    <div id="information_wrapper">
        
        <div id="engage_description">
    
            <div id="engage_basic_description"></div>
    
        </div>
    </div>
    <div class="tab-pane" id="engage_Slide_text_tab">
    </div>
    
    <script src="videojs/videojs-media-sources.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>

2019年1月22日更新

将直播从推送到播放的所有流程整理了一份最完整的流程，希望大家多多支持

[直播/点播系统快速搭建指南][Link 2]

[https://gitbook.cn/gitchat/activity/5c459895e1f3a5423d1c3a6c][Link 2]

[Link 1]: https://me.csdn.net/cmqwan
[Link 2]: https://gitbook.cn/gitchat/activity/5c459895e1f3a5423d1c3a6c