zoukankan      html  css  js  c++  java
  • 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',{
                // <?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;} ?>,
                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。。。难道用户量上来要收费???

  • 相关阅读:
    Binary Search Tree Iterator 解答
    Invert Binary Tree 解答
    Min Stack 解答
    Trapping Raining Water 解答
    Candy 解答
    Jump Game II 解答
    Implement Hash Map Using Primitive Types
    Gas Station 解答
    Bucket Sort
    HashMap 专题
  • 原文地址:https://www.cnblogs.com/dwj192/p/7040250.html
Copyright © 2011-2022 走看看