要是播不了的话，可以看下这篇文章。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默认的显示界面，就是还没点播放，给你显示的界面 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> <!-- 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
