项目中要用到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. vuer-cli 安装笔记

    电脑上装 的软件全卸载了.需要 重装 .整理了一下vue-cli脚手架搭建 1 先下载git 2 再下载node 3安装淘宝镜像 (https://npm.taobao.org/) 4 安装webpa ...

  2. git篇之二----团体项目中使用git

    上篇说了git的简单入门,本篇来说一下在团体项目中我们该如何简单使用git 一般来说,当我们进入公司之后,就前端项目而言,若是有多个同事共同开发一个系统,我们可能会每个人去负责各自的模块. 若是人员较 ...

  3. SpringBoot使用RestTemplate基础认证

    SpringBoot使用RestTempate SpringBoot使用RestTemplate摘要认证 SpringBoot使用RestTemplate基础认证 SpringBoot使用RestTe ...

  4. [Python3 练习] 004 水仙花数

    题目:水仙花数 (1) 描述 水仙花数各位的数字的立方之和等于自身 如 153 为水仙花数,因为 153 = 1^3 + 5^3 + 3^3 (2) 要求 找到所有的三位数的水仙花数 (3) 程序 # ...

  5. mysql 多表查询 以及 concat 、concat_ws和 group_concat

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只返 ...

  6. 自动生成脚本头部格式并调用VIM工具

    在我们写脚本的时候,开始总要按照脚本书写规范来定义脚本头部格式,久而久之是不是会觉得麻烦效率低下呢,这里就介绍一个好的思路给大家. 1 首先我们在VIM里先复制个头部格式的内容,这里就抄袭一个二师兄的 ...

  7. python 重点理论知识点

    Python多线程 GIL blablabla concurrent blablabla 简单地说就是作为可能是仅有的支持多线程的解释型语言(perl的多线程是残疾,PHP没有多线程),Python的 ...

  8. 利用js使图片外层盒子的高等于适应图片的高

    JS代码如下:<script> $(window).load(function(){ var width=$(window).width(); var img_1=$(".hot ...

  9. LeetCode Lect7 堆及其应用

    概述 堆是一颗完全二叉树.分为大根堆(父节点>=所有的子节点)和小根堆(父节点<=所有的子节点). 插入.删除堆顶都是O(logN),查询最值是O(1). 完全二叉树(Complete B ...

  10. 第一个javascript脚本

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...