vue html5播放流媒体,关于视频播放器:H5播放Rtmp之vuevideoplayer播放播放
一、简介
咱们看到了HLS播放视频实时性十分差,好的在6-7s,差点的就要10-12s了,也就是人走了,预计视频上还能看到,这对观感成果造成了很大的影响!然而益处就是它是基于http协定文件下载的,所以不须要任何插件,到处播放,处处兼容,所以rtmp和hls在web端的特点如下:
HLS
(1) 应用http协定,兼容所有浏览器。
(2) 延时十分大,不太适宜实时视频源,适宜文件点播或历史录像直播。
RTMP
(1) 应用flash插件播放,不兼容所有浏览器(特地2020年12月后chrome带头不再反对flash)
(2) 浏览器播放须要对浏览器平安进行设置,此外点播可能还会弹出确定提醒,交互体验较差
(3) 更贴近传统监控的实时协定,实时性十分好,根本与实时视频点播统一
思考到实时性,咱们可能还会抉择应用rtmp协定点播咱们的视频,所以就实时性而言还是很有必要思考rtmp协定的应用,接下来,我要跟大家一起分享的就是在web端应用rtmp协定查看视频。
二、vue-video-player播放Rtmp
vue我的项目应用vue-video-player底层其实还是用的是videojs,只不过是vue的一个插件而已,首先咱们须要在vue我的项目中装置该插件
npm install vue-video-player
而后,咱们间接在HelloWorld组件中应用播放器即可
class="vjs-custom-skin videoPlayer"
:options="playerOptions"
>
import "@/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";
export default {
components: {
videoPlayer,
},
data() {
return {
playerOptions: {
height: "300",
sources: [
{
type: "rtmp/mp4",
src: "rtmp://192.168.12.187:1935/live/1",
},
],
techOrder: ["flash"],
autoplay: false,
controls: true,
},
};
},
};
启用运行我的项目:
npm run serve
如果是chrome浏览器则须要容许插件拜访:
容许播放后能够看到rtmp视频了
测试发现vue版本的插件有点提早,大略在3s左右。
源码获取、单干、技术交换请获取如下联系方式:
QQ交换群:961179337
微信账号:lixiang6153
公众号:IT技术快餐
电子邮箱:lixx2048@163.com