PC端播放rtmp和hls视频流

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

hls播放

videojs

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

    
    
        
        
        
    
    
        
放松放松法的直播间
        
        
    

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