效果圖：
我這個是引入js的方式播放的，也可以用npm直接下載hsl.sj進行引入
1.public里面index.html頁面引入對應的js
<script src="./jquery.min.js"></script>
<script src="./ezuikit.js"></script>
<script src="./hls.min.js"></script>
<script src="./jsPlugin-1.2.0.min.js"></script>
這些js太多了，私信我挨個發給你們
2，頁面代碼，也沒什么，就一個for
<div v-for="i in tableData" :key="i.index" >
<video
:id=i.id
autoplay
:src=i.location
controls
playsInline
muted
webkit-playsinline>
</video>
</div>
autoplay： 自動播放，
controls： 顯示基本的控制元件，暫停、播放、進度條、等等
playsInline，webkit-playsinline：全屏播放控制元件
muted：兼容自動播放，有限瀏覽器不能自動播放就加這個屬性
3，調介面
回傳的資料格式是這樣的，只要id和location就可以了，定義兩個陣列，一個陣列轉id和location，另一個陣列只裝id，用來停止播放的，
methods: {
searchs(currpage,pagesize){
this.$axios.get(this.url+'listByAgencyCode',{params}).then( data=>{
if(data.data.success){
this.ids=[];// 置空ids中的內容
let result = data.data.data;
this.tableData = result.list;//頁面上回圈的物件陣列 （格式：[{},{},{}]）
this.totals = result.total;
this.tableData.map((v,i) =>{
this.tableData[i].id = "myPlayer_"+v.id;
})
for(let i=0,l = this.tableData.length;i<l;i++){//重新定義一個陣列只裝id
this.ids.push(this.tableData[i].id);
}
}
});
// 延時渲染視頻
this.renderVedio();
},
renderVedio(){
setTimeout(()=>{// 初始化視頻
this.players = [];
for(var j=0;j<this.ids.length;j++){
let player = new EZUIKit.EZUIPlayer(this.ids[j]);
this.players.push(player);
}
},2000);
},
}
//銷毀視頻
destroyed () {
for(var j=0;j<this.players.length;j++){
this.players[j].stop();
}
}
有什么寫錯的還請指正，
📢沒了，結束了，是不是很簡單吶，如有問題，歡迎留言，
📢如果此篇博文對您有幫助，還請動動小手點贊 👍 收藏 ?留言 📝吶~，謝謝 ~ ~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/390514.html
標籤：其他
上一篇：C#：圣誕節內卷，鉛筆畫制作