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。。。难道用户量上来要收费???

  • 相关阅读:
    一对多
    订单数据模型分析
    一对一查询(2)
    一对一查询
    Statement、PreparedStatemnt、CallableStatement
    getParameter和getAttribute的区别
    SQL基础试题
    Java 泛型(Generics) 综述
    <html>
    oracle视图建主键
  • 原文地址:https://www.cnblogs.com/dwj192/p/7040250.html
Copyright © 2011-2022 走看看