最终效果:
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样式文章来源:https://www.toymoban.com/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;
// 下边设置字体,我的需求是黑底白字
color: white;
line-height: 30px;
padding: 0 15px;
}
}
}
</style>
5.第2步跳转的video.html页面代码,用dplayer播放的,放在项目根目录的public文件夹即可文章来源地址https://www.toymoban.com/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, //此处可以是远程的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>
到了这里,关于【vue】前端页面点击按钮弹窗播放m3u8格式视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!