1.如果需要連接現場的局域網，可以先使用EasyConnect連接VPN，使用設備所在的內網
(俺的資源串列有EasyConnect)
2.使用VLC先測驗視頻流是否存在問題
(俺的資源串列有VLC)
3.進行代碼撰寫
01-下載hls.js
npm install hls.js
yarn add hls.js
02-在頁面進行引入
import hlsjs from 'hls.js'
03-撰寫html部分代碼
<template>
<div class="playVideo-layout">
<!-- 播放器 -->
<div id="app-container" class="video-box">
<video
ref="videoElement"
:src="videoUrl"
id="videoElement"
controls
muted
style="width: 100%; height: 100%; object-fit: fill"
></video>
</div>
</div>
</template>04-撰寫js代碼
//播放
show() {
this.video = this.$refs.videoElement; //定義掛載點
console.log(this.video);
if (hlsjs.isSupported()) {
this.hlsjs = new hlsjs();
this.hlsjs.loadSource(
"這里書寫路徑地址 例:http://192.168.1.1/live/abc.m3u8"
);
this.hlsjs.attachMedia(this.video);
console.log(this.hlsjs);
this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
this.video.play();
console.log("加載成功");
});
this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
// console.log(event, data);
// 監聽出錯事件
console.log("加載失敗");
});
} else {
this.$message.error("不支持的格式");
return;
}
},
//停止播放
closeVideo() {
if (this.hlsjs) {
this.$refs.videoElement.pause();
this.video.pause();
this.hlsjs.destroy();
this.hlsjs = null;
this.$emit("closeVideo");
}
},4.如果vlc能播放，網頁上卻播放不了，有可能以下問題
1.確認地址是否拼接有誤
2.查看連接的埠是否連通
3.由于部分瀏覽器不支持視頻壓縮技術,因此如果前端設備是H2645編碼的話，需要改為H264編碼 這個很可能出錯
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/273607.html
標籤：其他