项目中要用到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. 如何理解ajax的同步和异步？

    对于如下一段代码: var dataJson = {"ABC":'testABC'}; $.ajax({                url: "/MonkeyServ ...

  2. Ansible--常用命令整理

    由于最近使用ansible在多台服务器部署程序,运行命令的时候,发现对Linux和ansible自动运维工具用的不太熟练,所以搜集整理一些,方便日后复习提升,达到熟练运用的目的. 对于详细的安装教程和 ...

  3. 什么是 Python？

     Python 是一种编程语言,它有对象.模块.线程.异常处理和自动内存管理,可以加入其他语言的对比.  Python 是一种解释型语言,Python 在代码运行之前不需要解释.  Python 是动 ...

  4. Codeforces Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2)

    传送门 A. XORinacci 手玩三四项发现序列就是 $a,b,a\ xor\ b,a,b,...$,直接输出即可 #include<iostream> #include<cst ...

  5. 显式Mapping设置与常见参数介绍

    原文:显式Mapping设置与常见参数介绍 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ ...

  6. Spark 计算人员三度关系

    1.一度人脉:双方直接是好友 2.二度人脉:双方有一个以上共同的好友,这时朋友网可以计算出你们有几个共同的好友并且呈现数字给你.你们的关系是: 你->朋友->陌生人 3.三度人脉:即你朋友 ...

  7. 一、Rabbit使用-安装教程

    首先我去官网上面下载RabbitMQ安装包:https://www.rabbitmq.com/which-erlang.html 现在下载的版本是3.7.17  因为我erlong安装的是20.3

  8. nodejs 更新代码自动刷新页面

    安装第三方工具: nodemon npm install --global nodemon 安装完毕后使用: 之前使用: node xxx.js 改成 nodemon xxx.js 只要通过nodem ...

  9. linux权限管理—基本权限

    目录 Linux权限管理-基本权限 一.权限的基本概述 二.权限修改命令chmod 三.基础权限设置案例 四.属主属组修改命令chown Linux权限管理-基本权限 一.权限的基本概述 1.什么是权 ...

  10. RabbitMQ 全套

    本博客代码运行环境 ErLang: ErLang_X64_22 version RabbitMQ: RabbitMQ_Server_3.7.15 version python : Python 3.7 ...