项目中要用到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。。。难道用户量上来要收费？？？

video.js播放rtmp的更多相关文章

  1. video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  2. 视频播放效果--video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  3. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  4. 流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...

  5. 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...

  6. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  7. 移动端播放直播流（video.js 播放 m3u8 流）

    流媒体服务器: wowza 流媒体格式: m3u8 播放端:移动端网页(Android.IOS) 播放工具: video.js 代码如下: <!DOCTYPE html> <html ...

  8. 【vue】使用 Video.js 播放视频

    目录 安装 引入 使用 参考文档 环境: vue 2.0+ element ui (这里的代码用了elmentui的按钮样式,可以不用elment ui的样式) 安装 在项目中安装 video.js. ...

  9. html页面引用video.js播放m3u8格式视频

    //head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...

随机推荐

  1. Monte Carlo Policy Evaluation

    Model-Based and Model-Free In the previous several posts, we mainly talked about Model-Based Reinfor ...

  2. es6 export及export default 的使用 及 区别

    首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口i ...

  3. Eigen的aligned_allocator

    今天看ORBSLAM2中的OptimizeEssentialGraph()函数时,对一句代码中的aligned_allocator不太清楚: vector<g2o::Sim3,Eigen::al ...

  4. Count on a tree SPOJ 10628 主席树+LCA(树链剖分实现)（两种存图方式）

    Count on a tree SPOJ 10628 主席树+LCA(树链剖分实现)(两种存图方式) 题外话,这是我第40篇随笔,纪念一下.<(￣︶￣)↗[GO!] 题意 是说有棵树,每个节点上 ...

  5. 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...

  6. RMAN备份与恢复 —— 参数文件还原

         在RMAN用语中,“还原”与“恢复”具有不同的含义,还原(restore)是指访问先前生成的备份集,从中得到一个或多个对象,然后再磁盘上的某个位置还原这些对象.还原与恢复时分离的.恢复(re ...

  7. Angular.js 使用获取验证码按钮实现-倒计时

    获取验证码界面效果如图: 需要实现以下逻辑 按钮不可选 --输入电话号码,按钮可选 --点击获取,进入倒计时,按钮不可选 --倒计时结束,回到初识状态 核心代码: var cd = 60; var t ...

  8. JS中数组和字符串方法的简单整理

    一.数组: 数组的基本方法:              1.增:arr.unshift() /push()    前增/后增                  2.删:arr.shift() /pop ...

  9. HTML文件头部元素作用

    1.DOCTYPE的作用 DOCTYPE是document type(文档类型)的缩写.<!DOCTYPE html>声明位于文档最前面,主要作用是告诉浏览器的解析器使用哪种HTML规范或 ...

  10. 详聊js中的原型/原型链

    先以一段简单的代码为例: function Dog(params){     this.name = param.name;     this.age = param.age;     this.ba ...