![cover](https://img-blog.csdnimg.cn/e8a8c7a6ba074f3b88f1b8ede6d9be56.jpeg)
videojs 播放以及初始化
最近有个视频回放的功能,第三方给我这边rtmp协议的接口,rtmp协议在浏览器端是需要借助flash插件的,现在主流浏览器都不再支持flash了,火狐最后支持的版本是84.0.2、谷歌的87.0.4270.0,这个可以上网搜一下。除了这种方式还有常用三种协议格式,http-flv和http-Websoket协议格式前端可以用flv.js接收播放, hls协议原生video.js可以播放,如果是实时
·
目录
前言
最近有个视频回放的功能,第三方给我这边rtmp协议的接口,rtmp协议在浏览器端是需要借助flash插件的,现在主流浏览器都不再支持flash了,火狐最后支持的版本是84.0.2、谷歌的87.0.4270.0,这个可以上网搜一下。除了这种方式还有常用三种协议格式,http-flv和http-Websoket协议格式前端可以用flv.js接收播放, hls协议原生video.js可以播放,如果是实时视频的话不推荐会有几秒延迟,回放的可以考虑在内。说了这么多,由于一些原因,这个功能只能选择rtmp协议。
一、在vue中使用video.js
1.npm 安装 video.js
npm i video.js
2.引入video.js
//全局引入在 main.js 中进行引入
import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;
//局部引入在页面引入
import videojs from "video.js"
import "video.js/dist/video-js.css"
3.我这里是给它封装成了一个组件
做了两个按钮手动触发和关闭,我这边需求是回放,点击播放时先显示时间弹框,点确认时再触发视频,这个按照个人需求不需要的话取video就行
template配置
<template>
<div class="video-details" id="video-detailss">
<div class="video-mm" id="video-mm">
<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered"
preload="none"></video>
</div>
<div class="btns">
<el-button size="mini" @click="handlePlays">点击播放</el-button>
<el-button size="mini" @click="handleClear">关闭销毁</el-button>
</div>
</div>
</template>
引入video.js
//这是个时间处理
import moment from 'moment'
import videojs from "video.js"
import "video.js/dist/video-js.css"
props接收父组件传过来的值
props: {
liftInfoData: {
type: Object,
default: {},
},
},
触发销毁事件
otherCloseVideo() {
if (this.videoPlayers != null) {
this.videoPlayers.pause() //关闭
this.videoPlayers.dispose();//销毁
this.videoPlayers = null
}
},
关闭这个组件时触发video.js销毁
如果不销毁会一直占用你的浏览器内存,直到把浏览器崩溃
beforeDestroy() {
this.otherCloseVideo() //调用上方的销毁事件
},
销毁创建初始化
我这里的点播放的时候跳出选择时间节点的弹框,点确定时触发事件,先判断有无videoPlayers,有就给他先销毁再创建,你也可以选择我下方的重置,一样可以达到切换视频的效果。
handlePlay() {
if (this.videoPlayers) {
this.videoPlayers.dispose();//dispose该销毁是销毁的所有dom节点
$("#video-mm").html(' <video id="myvideo" class="video-js vjs-default-skin vjs-
big-play-centered" preload="none"></video>');//手动再创建
//这里隐藏掉的是重置播放器,重新选择地址,达到一个切换视频的效果,不太符合需求所以没有采用
// this.videoPlayers.reset();
// this.videoPlayers.src([
// {
// type: 'application/x-mpegURL',
// src:this.godSrc
// },
// ]);
// this.videoPlayers.load();
// this.videoPlayers.play();
}
let that=this
that.videoPlayers = videojs("myvideo", {
//确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用
autoplay属性或通过Player API。
// controls: true,
//自动播放属性,muted:静音播放
muted: true,
autoplay: true,
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto",
//设置视频播放器的显示宽度(以像素为单位)
width: "960px",
//设置视频播放器的显示高度(以像素为单位)
height: "522px",
//这里面放的就是视频的地址
sources: [{
src: that.godSrc
}],
playbackRates: [0.5, 1, 1.5, 2] //倍速播放
}, function () {
console.log("videojs播放器初始化成功");
});
that.videoPlayers.play();
},
最后的实现效果
更多推荐
所有评论(0)