【vue】前端页面点击按钮弹窗播放m3u8格式视频

最终效果：

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样式

<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文件夹即可

<!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格式视频

猜你喜欢