yarn add video.js videojs-contrib-hls
<template>
<div id="businessDetails">
<div class="carousel">
<img :src="'http://182.108.156.16:8889/' + detail.enviromentPicture" v-if="detail.enviromentPicture" />
<img src="../../assets/images/43.png" v-else />
</div>
<div class="detail-content">
<div class="content-title">{{detail.companyName}}</div>
<div class="person">
<div class="person-1">
<div class="person-1-1">
<div>联系人</div>
<div>{{ detail.chargePerson }}</div>
</div>
<div class="person-1-1">
<div>联系电话</div>
<div>{{ detail.phone }}</div>
</div>
<div class="person-1-1">
<div>监管分局</div>
<div>{{ detail.officeName }}</div>
</div>
<div class="person-1-1">
<div>所属片区</div>
<div>{{ detail.organName }}</div>
</div>
<div class="person-1-1">
<div>地址</div>
<div>{{ detail.address }}</div>
</div>
<div class="person-1-1">
<div>片管员</div>
<div>{{ detail.supervisorName }}</div>
</div>
</div>
</div>
</div>
<div class="keng"></div>
<div class="detail-content">
<div class="title">
<img src="../../assets/images/title-icon.png" />
<span>动态视频</span>
</div>
<div class="box" v-for="(v,i) in videoDatas" :key="i">
<div class="box-1">
<video :id="i" class="my-video video-js vjs-default-skin vjs-big-play-centered" muted="muted" preload="auto" width="100%" height="100%">
<source :src="`${leftUrl}${v.code}${rightUrl}`"
type="application/x-mpegURL" style="width: 100%; height: 800px;" />
</video>
<div class="video-name">{{v.name}}</div>
</div>
<!-- {{videoDatas.myVideo0.name}} -->
<!-- <div class="box-1">
<video id="myVideo1" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
<source :src="`http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8`"
type="application/x-mpegURL" />
</video>
<div>{{videoDatas.myVideo0.name}}</div>
</div> -->
<!-- <div class="box-1">
<video id="myVideo2" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
<source src="http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8"
type="application/x-mpegURL" />
</video>
<div>厨房区</div>
</div>
<div class="box-1">
<video id="myVideo2" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
<source src="http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8"
type="application/x-mpegURL" />
</video>
<div>厨房区</div>
</div>
<div class="box-1">
<video id="myVideo2" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
<source src="http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8"
type="application/x-mpegURL" />
</video>
<div>厨房区</div>
</div>
<div class="box-1">
<video id="myVideo2" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
<source src="http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8"
type="application/x-mpegURL" />
</video>
<div>厨房区</div>
</div> -->
</div>
</div>
</div>
</template>
<script>
export default {
name: "businessDetails",
data() {
return {
obj: "",
leftUrl: '',
rightUrl: '',
formalUrl: 'http://182.108.156.16:8889',
testUrl: 'http://172.30.1.163:8999',
currentUrl: '',
detail: "",
videoUrl: "http://182.108.156.16:8889/pag/61.180.67.164/85/001571/0/MAIN/TCP/live.m3u8",
posterUrl: "../../assets/images/34.png",
list: '',
videoDatas: {},
video: [],
};
},
mounted() {
if (window.location.hostname === 'localhost') {
this.currentUrl = this.testUrl
} else {
this.currentUrl = this.formalUrl
}
this.obj = this.$route.query;
this.getData(this.obj);
this.getUrl('hls_url', 'prefix').then(res => {
if (res.data.code == 200) {
this.leftUrl = res.data.data.code
}
})
this.getUrl('hls_url', 'suffix').then(res => {
if (res.data.code == 200) {
this.rightUrl = res.data.data.code
}
})
},
destroyed() {
for(var i in this.video){
this.video[i].dispose()
}
this.video = []
},
methods: {
getData(obj) {
this.axios({
url: this.currentUrl + "/market-regulation/api/getCameraByCompanyIdAndModel",
method: "POST",
params: {
companyId: obj.companyId,
model: obj.model,
encry: 1,
},
}).then((res) => {
if (res.data.code == 200) {
this.detail = res.data.data.companyMessage;
this.list = res.data.data.cameraList
this.list.forEach((item, index) => {
let key = `myVideo${index}`
this.videoDatas[key] = {
...item
};
})
this.$nextTick(() => {
let list = this.list;
for (let i = 0; i < list.length; i++) {
this.initPlayer('myVideo' + i, i)
}
}, )
}
});
},
getUrl(type, name) {
return new Promise(resolve => {
this.axios({
url: this.currentUrl + '/market-regulation/api/selectByDic',
method: 'POST',
params: {
type: type,
name: name
}
}).then(res => {
resolve(res)
})
})
},
initPlayer(id, index) {
let _this=this;
console.log(index)
this.video[id] = this.$video(
id, {
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
"controls": true,
"autoplay": false,
techOrder: ['html5'],
html5: {
hls: {
overrideNative: false
},
nativeVideoTracks: true,
nativeAudioTracks: true,
nativeTextTracks: true
}
},
function() {
this.on("loadedmetadata", function() {
console.log("loadedmetadata");
//加载到元数据后开始播放视频
// myPlayer.play();
});
this.on("ended", function() {
console.log("ended");
});
this.on("loadstart", function() {
//开始加载
// myPlayer.play();
console.log("loadstart");
});
this.on("loadeddata", function() {
console.log("loadeddata");
});
this.on("seeking", function() {
//正在去拿视频流的路上
console.log("seeking");
});
this.on("seeked", function() {
//已经拿到视频流,可以播放
console.log("seeked");
});
this.on("waiting", function() {
console.log("waiting");
});
this.on("pause", function() {
console.log("pause");
// console.log(_this,666)
});
this.on("play", function() {
// console.log("play",_this.video[id],this.id_)
console.log(this,444)
for(let i in _this.video){
console.log(i!== this.id_,"id不等于")
if(i!== this.id_){
console.log(_this.video[i],"id不等于")
_this.video[i].pause()
}
}
// _this.video.forEach((v,i)=>{
// console.log(v,i,444)
// })
})
this.on("error", function() {
console.log("加载错误");
});
}
);
// var urlObj = {
// src: "http://182.108.156.16:8889/pag/61.180.67.164/85/001571/0/MAIN/TCP/live.m3u8",
// type: "application/x-mpegURL"
// };
// myPlayer.src([urlObj]);
},
},
};
</script>
video.js直播流的使用
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 1.简单版 （小心cdn失效）<!DOCTYPE html> 2.复杂版<!DOCTYPE html> Vid...
- var video = videojs("vinnoVideo");video.ready(function() ...
- 昨天做了一个直播的页面，使用的是拉流链接是一个.m3u8后缀的链接，以前没有做过直播类型的，所以上网查了下，PC端...
