项目中要用到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. python基础-9__import__ 反射和面向对象基础 self 封装 继承（多继承顺序） 多态

    一 反射 python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,改四个函数分别用于对对象内部执行:检查是否含有某成员.获取成员.设置成员.删 ...

  2. Leveldb--Slice

    http://www.kuqin.com/database/20110919/265041.html Slice非常简单的数据结构,它包括length和一个指向外部字节数组的指针.为什么使用Slice ...

  3. C# TCPListener

    1: 有两个地方必须做异常处理,异常类型为IOException 服务器读客户端发来的信息时: LeafTCPClient client = (LeafTCPClient)ar.AsyncState; ...

  4. 《剑指offer》面试题12 打印1到最大的n位数 Java版

    书中方法:这道题的一个陷阱在于不能用int或者long去存储你要打印的数,然后用打印函数打印,因为这个数可能会很大.如果加1后超出了最大的n位数,就不打印了.用最高位是否进位判断是否结束,打印的时候注 ...

  5. 中国剩余定理(CRT) & 扩展中国剩余定理(ExCRT)总结

    中国剩余定理(CRT) & 扩展中国剩余定理(ExCRT)总结 标签:数学方法--数论 阅读体验:https://zybuluo.com/Junlier/note/1300035 前置浅讲 前 ...

  6. Educational Codeforces Round 60 (Rated for Div. 2) D. Magic Gems（矩阵快速幂）

    题目传送门 题意: 一个魔法水晶可以分裂成m个水晶,求放满n个水晶的方案数(mol1e9+7) 思路: 线性dp,dp[i]=dp[i]+dp[i-m]; 由于n到1e18,所以要用到矩阵快速幂优化 ...

  7. ORACLE之字符集修改（10g）

    当从oracle服务器将数据导出成dmp文件后,再导入到本地的oracle数据库时,出现: IMP-00019: 由于 ORACLE 错误 12899 而拒绝行 IMP-00003: 遇到 ORACL ...

  8. linux下命令行执行Python程序提示no moudle,路径问题

    在ide中执行python程序,已经设置好项目路径中. 但是在cmd中执行程序,所在路径是python的搜索路径,如果涉及到import引用就会报类似ImportError: No module na ...

  9. jest操作 Elasticsearch

    package com.lgmall.search; import com.lgmall.search.esEntity.Article;import com.lgmall.search.esEnti ...

  10. Js中window.location.href和window.location.replace的区别

    href相当于打开一个新页面,replace相当于替换当前页面:这里打开页面都是针对历史记录来说,在页面上看完全相同,只是浏览器的history表现不同如果在1.html中点击链接到2.html,然后 ...