项目中要用到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. 应用安全 - 渗透测试 - .net网站

    注入 注入 单引号检测 - 多数使用MSSQL数据库 常规注入绕过 "or''=' | 'or''=' 'or'='or' | 'or'='or'" 上传 加图片头GIF89A

  2. Mac018--VisualBox & ubuntu 安装

    一.安装虚拟机VMware 参考博客:https://blog.csdn.net/u013142781/article/details/50529030 Step1:下载ubuntu镜像 注:选择Ub ...

  3. jenkins 启动报错

    daemon: fatal: refusing to execute unsafe program: /usr/java/jdk1.8.0/bin/java (/usr/java/jdk1.8.0/b ...

  4. day20 博客系统开发

    setting 文件加入  AUTH_USER_MODEL = "app名称.UserInfo"     from django.db import models # Create ...

  5. python学习笔记(7): 面向对象

    class Foo: #类中的函数 def bar(self): #功能阐述 print('Bar') pass def hello(self,name): print('i am %s' %name ...

  6. 88-基于FMC接口的2路CameraLink Base输入子卡模块

    基于FMC接口的2路CameraLink Base输入子卡模块 1.板卡概述 FMC连接器是一种高速多pin的互连器件,广泛应用于板卡对接的设备中,特别是在xilinx公司的所有开发板中都使用.该Ca ...

  7. 【python】pyenv与virtualenv安装，实现python多版本多项目管理

    踩了很多坑,记录一下这次试验,本次测试环境:Linux centos7 64位. pyenv是一个python版本管理工具,它能够进行全局的python版本切换,也可以为单个项目提供对应的python ...

  8. Intel MKL函数之 cblas_sgemm、cblas_sgemm_batch

    cblas_sgemm int m = 40; int k = 20; int n = 40; std::vector<float> a(m*k, 1.0); std::vector< ...

  9. Object中有哪些公用方法？

    clone()方法 实现对象的浅复制,只有实现了Cloneable接口才能调用该方法. toString()方法 返回该对象的字符串表示. equals()方法: 在Object中与“==”的定义是一 ...

  10. hdu 4643 GSM(暴力)

    GSM Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submis ...