代码:其中包含苹果系统使用video.js播放m3u8格式的监控视频
showVideo() {
if (this.monitorDetail.url.indexOf("ws://") !== -1 || this.monitorDetail.url.indexOf("wss://") !== -1) {
this.isShowVideo = true
this.isLoading = true
$("#my-player").hide()
this.player = new window.JSPlugin({
szId: 'my-player1', //节点id
szBasePath: '/static/h5player', //插件路径
openDebug: false,
})
let playURL =
this.monitorDetail.url
this.player.JS_Play(playURL, {
playURL,
mode: 0 // 1为高级模式,0为普通模式
}, 0).then(() => {
// 播放成功
this.isLoading = false
}, e => {
// 播放失败
this.$message({
message: '播放失败',
type: 'error',
duration: 3000
});
})
} else if (this.monitorDetail.url.indexOf(".m3u8") !== -1) {
this.isShowVideo = true
this.isLoading = true
this.player = document.getElementById("my-player");
if (Hls.isSupported()) {
this.hls = new Hls();
this.hls.loadSource(this.monitorDetail.url);
this.hls.attachMedia(this.player);
this.hls.on(Hls.Events.MANIFEST_PARSED, function () {
this.player.play();
this.isLoading = false
});
} else if (this.player.canPlayType("application/vnd.apple.mpegurl")) {
this.player.src = this.monitorDetail.url;
this.player.addEventListener("loadedmetadata", function () {
this.player.play();
this.isLoading = false
});
}
return;
this.isShowVideo = true
this.isLoading = true
var videoObject = {
container: '#my-player1', //容器的ID或className
live: true, //指定为直播
autoplay: true,
volume: 0.001,
type: "hls",
mouseWheelVolume: 0,
keyVolume: 0,
playbackrateList: [1],
plug: 'hls.js', //设置使用hls插件
video: this.monitorDetail.url //视频地址
}
this.player = new ckplayer(videoObject);
this.player.play(() => {
this.isLoading = false
})
this.player.error(() => {
this.$message({
message: '播放失败',
type: 'error',
duration: 3000
});
this.closeVodeo()
})
} else {
if (flvjs.isSupported()) {
this.isShowVideo = true
this.isLoading = true
$('.ub-showVideo').show()
this.showDetail = false
let videoElement = document.getElementById('my-player');
this.player = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: this.monitorDetail.url, //<==自行修改
}, {
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
});
this.player.attachMediaElement(videoElement);
this.player.load(); //加载
setTimeout(() => {
document.getElementById('my-player').onplay = () => {
this.isLoading = false
};
}, 300)
} else {
alert("ios暂不支持此格式视频播放")
this.showDetail = false
}
}
},
// 关闭监控
closeVodeo() {
this.isShowVideo = false
if (this.monitorDetail.url.indexOf("ws://") !== -1 || this.monitorDetail.url.indexOf("wss://") !== -1) {
this.player.JS_Stop()
} else if (this.monitorDetail.url.indexOf(".m3u8") !== -1) {
$('#video1').children('#my-player').remove()
$('#video1').append('<video id="my-player" style="width: 100%;" preload="auto" muted autoplay controls style="border: 1px solid red;">< source src = "" ></video>')
// this.player = null
this.hls.destroy();
// this.player.destroy();
} else {
this.player.destroy()
}
$('.ub-showVideo').hide()
},