html5播放rtmp流ohr,PC端播放rtmp和hls视频流

本文将会介绍如何在网页端上实现直播的播放。

hls播放

videojs

如果我们要让我们的网页支持在所有浏览器上播放，我们就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。下面是一个播放的例子。你可以将source标签下的src换成你自己的直播流地址。需要注意的是rtmp流的type是rtmp/flv(flv 跟推流的时候FFmpegFrameRecorder设置的format有关), hls 的type是application/x-mpegURL。

放松放松法的直播间

poster="https://img.alicdn.com/imgextra/i2/754328530/TB2FpxhkXXXXXa5XXXXXXXXXXXX_!!754328530.jpg" data-setup="{}">

To view this video please enable JavaScript, and consider upgrading to a web browser that

supports HTML5 video

不过这里有个小问题，需要先安装一个依赖，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流正常才行，不然方法再对也是出不来的亲！