videojs集成--播放rtmp流

之前说到已经把流推送过来了，这时候就可以使用videojs来进行显示播放。

首先要先有一个文件，那就是video-js.swf

因为，这种播放方式html已经不能很好的进行播放了，需要用到flash来播放，videojs在这个地方就用到了这个。

代码就是下面这样。

里面一些细节注释都有。

重点就是看<video>标签里面的内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta charset="utf-8">
<meta name="description" content="Opencast Media Player">
<meta name="author" content="Opencast">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>RTMP播放</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/core_global_style.css">
<script src="videojs/jquery.js"></script>
<script src="videojs/video.js"></script>
<link href="videojs/video-js.css" rel="stylesheet">
<script>
videojs.options.flash.swf = "videojs/video-js.swf";//flash路径，有一些html播放不了的视频，就需要用到flash播放。这一句话要加在在videojs.js引入之后使用
</script>
</head>
<body >
<div id="engage_view" style="display: block;">
<div id="engage_content">
<div id="engage_resize_container">
<div id="engage_video">
<!-- theodul video videojs plugin desktop mode controls preload="auto"
vjs-big-play-centered 播放按钮居中
poster默认的显示界面，就是还没点播放，给你显示的界面
controls
preload="auto" 是否提前加载
autoplay 自动播放
loop=true 自动循环
data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}
-->
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
poster="videojs/eguidlogo.png" width="800" height="600"
>
<!--
<source src="../output.mp4" type='video/mp4'> mp4格式
<source src='rtmp://127.0.0.1/hls/test' type='rtmp/flv'/> rtmp格式
<source src='http://127.0.0.1/hls/test.m3u8' type='application/x-mpegURL'/> m3u8格式
<source src='http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8' type='application/x-mpegURL'/> m3u8格式，可用
-->
<source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/>
</video>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div id="information_wrapper">
<div id="engage_description">
<div id="engage_basic_description"></div>
</div>
</div>
<div class="tab-pane" id="engage_Slide_text_tab">
</div>
<script src="videojs/videojs-media-sources.min.js"></script>
<script src="videojs/videojs.hls.min.js"></script>
<script>
//播放的话，就直接使用下面2行
//后面注释的那些其实也是可用用的，不过刚开始集成，越简单越好
var player = videojs('my-video');
player.play();
/*
(function ($) {
var resetVideoSize = function (myPlayer) {
var videoJsBoxWidth = $(".video-js").width();
var ratio = 1440 / 900;
var videoJsBoxHeight = videoJsBoxWidth / ratio;
myPlayer.height(videoJsBoxHeight);
}
$(window).on("resize", function () {
resetVideoSize(myPlayer);
});
myPlayer.play();
})(jQuery)
function changeSrc() {
var src = "http://127.0.0.1/hls/test.m3u8";
var myPlayera = videojs("my-video");
$("#my-video").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")
myPlayera.src("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新初始化视频地址
myPlayera.load("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新加载
}
*/
function changeSrc(src) {
var myPlayera = videojs("my-video");
//$("#videojs_videodisplay_presentation_html5_api").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")
myPlayera.src(src); //重新初始化视频地址
myPlayera.load(src); //重新加载
}
</script>
</body>
</html>

videojs集成--播放rtmp流的更多相关文章

EasyDSS RTMP流媒体服务器videojs flash播放RTMP/HLS提示错误的解决方案
本文转自EasyDSS团队成员StarIT的博客:http://blog.csdn.net/staritstarit/article/details/73692715 问题在博客<EasyDS ...
流媒体基础实践之——RTMP和HLS分发服务器nginx.conmf配置文件(解决了,只能播放RTMP流而不能够播放HLS流的原因)
user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; events { worke ...
前端页面播放 rtmp 流与 flv 格式视频文件
技术 :angular/cli , html5 , typescript , scss ,es 6 ... 项目类型:直播视频与视频回放使用到插件 : videojs + ckplayer 遇到的 ...
流媒体技术学习笔记之（二）RTMP和HLS分发服务器nginx.conmf配置文件(解决了,只能播放RTMP流而不能够播放HLS流的原因)
user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; events { worke ...
浏览器播放rtmp流
我是利用flash插件实现的,需要以下几个文件: flowplayer-3.2.8.min.js flowplayer-3.2.18.swf flowplayer.rtmp-3.2.8.swf flo ...
EasyDSS RTMP流媒体服务器中调用videojs播放rtmp视频显示在左上角问题
本文转自EasyDarwin团队成员Penggy的博客:http://www.jianshu.com/p/f63f5b7c691b 问题描述: 近期我开发了一款新一代的RTMP/HLS流媒体服务器软件 ...
Android 如何直播RTMP流
在android上,视频/音频流直播是极少有人关注的一部分.每当我们讨论流媒体,RTMP(Real Time Messaging Protocol)是不可或缺的.RTMP是一个基本的视频/音频直播流协 ...
搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
写了个项目 Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流
http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转 ...

随机推荐

python学习笔记（session）
昨天提到想加入cookies 测试登录后的接口尝试了下只要用 session方法即可代码如下 #!/usr/bin/env python # -*- coding: utf_8 -*- impo ...
为啥YII2 会出现 mcrypt_generic_init(): Key size is 0
解决方案如下: (关键) 示例代码中,加密解密类的实例创见通过 Class 同名方法的方式创建. public function WXBizMsgCrypt($token, $encodingAes ...
WPF布局控件常用属性介绍
WPF布局控件常用属性介绍其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次有用(0) 评论(0) 概述:WPF布局控件都是派生自System.Windows ...
在UIElement外面多套一层布局面板（Grid、StackPanel）的意义
在一个UIElement或多个UIElement外面套上一层布局面板(Grid.StackPanel),可以起到统一管理作用(非重点关注):另外,更重要的是:可以起到扩大UIElement操作有效范围 ...
Linux：安装git
1.下载 https://www.kernel.org/pub/software/scm/git/git-2.9.4.tar.gz 2.解压 tar zxvf git-2.9.4.tar.gz cd ...
linux上安装mysql以后root不能登录的解决办法
今天心血来潮在linux上装了mysql,装完以后用命令mysql -uroot -p登录时提示解决办法: 使用ps aux|grep mysql 查出pid 使用kill pid结束mysql进程 ...
tomcat学习篇
要求: 为Apache HTTP Server服务器添加JSP网页支持. 能够访问Tomcat容器的Web管理界面,以便管理各种JSP.Servelet应用. u 知识提示在各种企业级网站应用系统中 ...
《The Cg Tutorial》阅读笔记——光照 Lighting
本文为大便一箩筐的原创内容,转载请注明出处,谢谢:http://www.cnblogs.com/dbylk/p/4796306.html 光照 Lighting 一.常见的几种光照模型二.基本的光照 ...
language model ——tensorflow 之RNN
代码结构 tf的代码看多了之后就知道其实官方代码的这个结构并不好: graph的构建和训练部分放在了一个文件中,至少也应该分开成model.py和train.py两个文件,model.py中只有一个P ...
剑指offer--32.把数组排成最小的数
用to_string()将整形转化为字符串,对字符串进行比较 --------------------------------------------------------------------- ...

videojs集成--播放rtmp流

videojs集成--播放rtmp流的更多相关文章

随机推荐

热门专题