最終效果：
1.表格操作列
<el-table ref="tables" v-loading="loading" :data="list" :default-sort="defaultSort" @sort-change="handleSortChange" border>
<el-table-column label="id" align="center" prop="id" />
<el-table-column label="第幾集" align="center" prop="nPlay" />
<el-table-column label="播放地址" align="center" prop="playUrl" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
icon="el-icon-info"
type="text"
size="small"
@click.stop="initVideo(scope.row.playUrl,scope.row.nPlay)"
>播放視頻</el-button>
</template>
</el-table-column>
</el-table>2.initVideo方法
data(){
return{
dialogUrl:'',
videoid:undefined,
videoName:''
}
}
initVideo(url,nPlay) {
this.title = '《'+this.videoName+'》 第'+nPlay+'集';
this.dialogUrl = '/video.html?'+url;
this.open = true;
},3.彈出層代碼
<el-dialog
:title="title"
:visible.sync="open"
width="50%"
class="showAll_dialog"
:modal='false'
center>
<iframe :src="dialogUrl" width="95%" height="95%" style="border: medium none;"></iframe>
</el-dialog>4.showAll_dialog樣式文章來源：http://www.zghlxwxcb.cn/news/detail-766514.html
<style lang="scss" scoped>
.showAll_dialog {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
::v-deep .el-dialog {
margin: 0 auto !important;
height: 95%;
overflow: hidden;
background-color: white;
.el-dialog__body {
position: absolute;
left: 0;
top: 54px;
bottom: 0;
right: 0;
z-index: 1;
overflow: hidden;
overflow-y: auto;
// 下邊設(shè)置字體，我的需求是黑底白字
color: white;
line-height: 30px;
padding: 0 15px;
}
}
}
</style>5.第2步跳轉(zhuǎn)的video.html頁面代碼，用dplayer播放的，放在項目根目錄的public文件夾即可文章來源地址http://www.zghlxwxcb.cn/news/detail-766514.html
<!DOCTYPE html>
<html>
<head>
<title>dplayer播放m3u8</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
<script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>
<style>
#dplayer {
width: 50%;
/*height: 500px;*/
}
*{
margin: 0;
padding: 0;
}
/* 父容器樣式 */
.container{
height: 100%;
background-color: white;
}
/* 子容器樣式 */
.son{
background-color: white;
/* 水平垂直居中 */
margin: 0px auto;
}
</style>
<script>
function init() {
var str=location.href; //取得整個地址欄
var url=str.split("?")[1]
console.log('=====================')
console.log(url)
url = url.replaceAll('http:','https:');
const dp = new DPlayer({
element: document.getElementById('dplayer'),
video: {
// pic: videoInfo.img, // 封面
url: url, //此處可以是遠(yuǎn)程的url,也可以是本地的文件
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls()
hls.loadSource(video.src)
hls.attachMedia(video)
}
}
}
})
}
</script>
</head>
<body onload="init()">
<div class="container">
<div id="dplayer" class="son"></div>
</div>
</body>
</html>
到了這里，關(guān)于【vue】前端頁面點擊按鈕彈窗播放m3u8格式視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
