videojs集成--播放rtmp流

要是播不了的话，可以看下这篇文章。http://blog.csdn.net/cmqwan/article/details/76059703

之前说到已经把流推送过来了，这时候就可以使用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默认的显示界面，就是还没点播放，给你显示的界面controlspreload="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><!-- http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8 可用的m3u8地址    --><!-- rtmp://live.hkstv.hk.lxdns.com/live/hks  可用的rtmp地址--></div></div><!-- timeline plugin container --></div>
</div>
<div class="clear"></div>
<div id="information_wrapper"><!-- description plugin container --><div id="engage_description"><!-- theodul description plugin desktop mode --><div id="engage_basic_description"></div></div>
</div>
<div class="tab-pane" id="engage_Slide_text_tab"><!-- theodul tab slidetext plugin embed mode -->
</div><script src="videojs/videojs-media-sources.min.js"></script>
<!-- <script src="videojs/videojs-contrib-hls.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>

2019年1月22日更新

将直播从推送到播放的所有流程整理了一份最完整的流程，希望大家多多支持

直播/点播系统快速搭建指南

https://gitbook.cn/gitchat/activity/5c459895e1f3a5423d1c3a6c

videojs集成--播放rtmp流相关推荐

关于ZFPlayer集成播放 rtmp 视频流的总结
最近公司项目需要能够播放 rtmp 格式的直播流地址的播放器,安卓那边是买了人家的三方库,EasyPlayer,但是不想再买一个 ios 的了所以需要自己去找免费的合适的播放器去集成,终于在 gith ...
直播视频流 html,html 播放rtmp流视频
最近项目上需要将视频在web上能够预览. 起初用到了VLC插件.但是该插件有个弊端让人很蛋疼.因为谷歌37版以后及其火狐等主流浏览器很多不支持.除此之外即使支持,也要另外下载一个vlc客户端安装好了. ...
解决 LiveQing 流媒体服务器videojs flash播放RTMP、HLS提示错误的问题
问题 LiveQing流媒体服务器可以输出HTTP-FLV .Websocket-FLV.RTMP.HLS流,在做RTMP.HLS flash播放时候,经常会遇到网站flash被禁用的情况,每一次都会 ...
PC端播放RTMP流(手机端无法播放)
这是之前从网上搜到的资料保存下来,已经忘记是哪位大神的了望见谅! 当前手机端不支持RTMP和RTSP 需要自己做播放器才可以进行支持有效的RTMP直播源:(亲测可用!) rtmp://live.h ...
使用video.js播放rtmp流时报错FLASH: NetStream.Play.Failed
1.选用X5版本video.js,因为X6及以上版本不支持rtmp的播放 2.指定video-js.swf文件路径 videojs.options.flash.swf = "lib/vide ...
直播视频流+html,前端页面播放 rtmp 流与 flv 格式视频文件
技术 :angular/cli , html5 , typescript , scss ,es 6 ... 项目类型:直播视频与视频回放使用到插件 : videojs + ckplayer 遇到的 ...
videojs+hsl播放直播流
最近在做监控播放,用到videojs+hsl来做播放,此外还用到html2canvas ,因为业务希望在暂停的时候可以不再请求后端,停止推流来节省费用,videoPlayer.dispose()后会黑 ...
h5 rtmp推荐控件_H5播放Rtmp之videojs播放
一.简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所 ...
如何在IE浏览器播放RTSP或RTMP流
好多开发者一直苦恼于如何在IE浏览器环境下,构建低延迟的RTSP或RTMP播放,对于RTSP流来说,好多公司通常的做法是把RTSP转RTMP,然后分发到RTMP服务器,然后服务器转http-flv出来 ...

videojs集成--播放rtmp流

videojs集成--播放rtmp流相关推荐

最新文章

热门文章