video.js播放rtmp


項目中要用到rtmp直播和點播。要求:點播能夠調整播放進度

 開始用騰訊提供的播放器,老卡,畫質差,很多時候播不出來,rtmp點播還不能快進。

后來用Wowza自帶的flash rtmp播放器,有源碼

 

嘗試修改源碼,發現他的前端js和后端flash都沒有交互,沒寫過as,風險大,又太耗時,果斷pass。。。

 

jwplayer rtmp播放好像也是要商業授權,最后選用了video.js

下載地址:https://github.com/videojs/video.js/releases

 發現 V6.X.X的都播不了rtmp,V5.x.x的才行,對比發現,V6.X.X目錄下沒有video-js.swf,rtmp需要flash來播吧。V6可能是緊跟潮流,把flash給kill了,adobe flash是牆倒眾人推哈。。。

查了下,還真是:http://blog.videojs.com/Video-js-removes-Flash-from-core-player/

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Video.js | HTML5 Video Player</title>
    <!-- <link href="video-js-6.2.0/video-js.css" rel="stylesheet">
    <script src="video-js-6.2.0/videojs-ie8.min.js"></script> -->

    <link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/5.20.1/videojs-ie8.min.js"></script>
    
</head>
<body>

  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <!-- <source src="1.mp4" type="video/mp4"> -->
    <source src="rtmp://192.168.1.12:1935/live/720.stream" type="rtmp/flv">
    
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
  
  <script src="http://vjs.zencdn.net/5.20.1/video.js"></script>
</body>

</html>

 但是問題來了,我用手機推個流:豎放,沒問題。

 當我把手機橫放以后。。。畫面沒轉。。。變形了。。。

 

找解決方法中。后面再來更新。。。

------------------------------------------------------------------------------------2017-11-14更新

最終采用的video.js方法播放rtmp和hls方法,保證電腦和手機端都能看。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video.js | HTML5 Video Player</title>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <script src="video-js-6.2.0/videojs-ie8.min.js"></script> -->
    <link href="video-js-5.20.1/video-js.css" rel="stylesheet">
    <script src="video-js-5.20.1/ie8/videojs-ie8.min.js"></script>
</head>
<body style="margin:0px;">

    <video id="yxm_video" class="video-js vjs-default-skin vjs-big-play-centered" >
        <p class="vjs-no-js">您的瀏覽器不支持H5或FLASH</p>
    </video>
    <script src="video-js-5.20.1/video.vod.js"></script>
    
    <script>
        
        var player = videojs('yxm_video',{
            //width: <?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['width']) ){ echo $_GET['width'];} else {echo 1280;} ?>,
            //height: <?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['height']) ){ echo $_GET['height'];} else {echo 720;} ?>,
            width:980,
            height:550,
            controls:true,
            preload:"true",    //預加載:string;'auto'|'true'|'metadata'|'none'
            //poster:'source/suoluetu.jpg',//預覽圖:string
            autoplay:<?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['auto'])){ echo 'true';} else {echo 'false';} ?>,
            loop:<?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['loop'])){ echo 'true';} else {echo 'false';} ?>,
            muted:false, //靜音
            sources:[
                {
                    //src:'source/test.mp4',
                    //type:'video/mp4'
                    //src:'rtmp://192.168.2.24:1935/live/720yzc.stream',
                    <?php 
                        if(is_array($_GET) && count($_GET)>0 && isset($_GET["rtmp"])){
                    ?>
                        src:'<?php echo urldecode($_GET["rtmp"]); ?>',
                        
                    <?php
                        } else {
                    ?>
                        // 默認地址
                        src:'',
                    <?php
                        }
                    ?>
                        // 默認視頻類型
                        type:'rtmp/flv'
                },
                {
                    <?php 
                        if(is_array($_GET) && count($_GET)>0 && isset($_GET["hls"])){
                    ?>
                        src:'<?php echo urldecode($_GET["hls"]); ?>',
                        
                    <?php
                        } else {
                    ?>
                        // 默認地址
                        src:'',
                    <?php
                        }
                    ?>
                        // 默認視頻類型
                        type:'application/x-mpegURL'
                }
            ],
            controlBar: {
                muteToggle: false, //靜音按鈕
                volumeMenuButton: false, // 音量調節
                <?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['live'])){ echo 'progressControl: false';} ?>
                
            }
        },function onPlayerReady(){
            
        });        

    </script>
</body>
</html>

 ------------------------------------------------------當我把手機橫放以后。。。畫面沒轉。。。變形了。。。的問題的解決方案---2017-11-14更新--------------------------

后來發現百度改版的video.js player可以自適應畫面,下載地址:

http://cyberplayer.bcelive.com/demo/new/index.html

只是比較蛋疼的是要注冊一個百度的accessKey。。。難道用戶量上來要收費???


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM