本文将会介绍如何在网页端上实现直播的播放。
hls播放
<html lang="en">
<head>
<meta charset=utf-8/>
</head>
<body>
<div id='player'>
<video width="640" height="320" controls>
<source src="http://10.10.5.119/live/livestream.m3u8" type="application/x-mpegURL">
</video>
</div>
</body>
</html>
videojs
如果我们要让我们的网页支持在所有浏览器上播放，我们就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。下面是一个播放的例子。你可以将source标签下的src换成你自己的直播流地址。需要注意的是rtmp流的type是rtmp/flv（flv 跟推流的时候FFmpegFrameRecorder设置的format有关）, hls 的type是application/x-mpegURL。
<html>
<head>
<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
</head>
<body>
<h1>放松放松法的直播间</h1>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="https://img.alicdn.com/imgextra/i2/754328530/TB2FpxhkXXXXXa5XXXXXXXXXXXX_!!754328530.jpg" data-setup="{}">
<source src="rtmp://10.10.5.119/live/livestream" type="rtmp/flv">
<!-- 如果上面的rtmp流无法播放，就播放hls流 -->
<source src="http://10.10.5.119/live/livestream.m3u8" type='application/x-mpegURL'>
<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.5.3/video.js"></script>
</body>
</html>
不过这里有个小问题，需要先安装一个依赖，github上发现了一个项目叫 vue-video-player（总之我是这么做的不然出不来视频直播）
npm install vue-video-player --save
如果是vue项目中，要在main.js中引入：
import Vue from 'vue' //这个不要照搬，如果你是vue项目并且已经引入了的话就不用引
import VideoPlayer from 'vue-video-player' //记住这两句必须有！！
然后use：
Vue.use(VideoPlayer) //记住这两句必须有！！
最后你就可以在上面的HTML页面里src的地方添加你的rtmp流地址了，注意要保证你的rtmp流正常才行，不然方法再对也是出不来的亲！
网友评论