Element-UI实现对话框内播放视频

1.问题

• 效果: 实现一个点击播放列表中的一个视频标题, 然后弹出一个对话框进行视频播放, 可点击全屏进入全屏播放.
• 环境: Nuxt.js 、Vue.js、Element-UI、阿里云播放器Aliplayer.

2. 解决步骤

• 第1步: 在你要进行播放视频的页面引入阿里云播放器Aliplayer资源文件.
  我的播放页面是_id.vue
  

这个引入最好放在较外层的标签里, 要在创建播放器之前就引入, 毕竟这是一个网络资源, 加载需要时间, 否则偶尔会因为创建播放器时找不到资源而报错.

    <div>
      <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css" />
      <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js">script>
    div>

• 第2步: 创建一个播放器组件player, 放在Nuxt.js的components文件夹中.
  其实也可以不创建组件, 直接在进行播放视频的页面编写, 我这样做是为了方便管理
  

<template>
   
  <div class="prism-player" id="J_prismPlayer" style="margin-left: auto; margin-right: auto;">div>
template>
<script>

  export default {
    props:{
     //组件需要的参数
      video: Object
    },
    data() {
      return {
      }
    },
    created() {
      //console.log("组件成功")
    },
    mounted(){
      this.initPlayer()
    },
    methods: {
      initPlayer(){
        //console.log(this.video)
        new Aliplayer({
          id: 'J_prismPlayer',
          vid: this.video.vid, // 视频id
          playauth: this.video.playauth, // 播放凭证
          encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
          width: '800px',
          height: '450px',
          //cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面
          qualitySort: 'asc', // 清晰度排序
          mediaType: 'video', // 返回音频还是视频
          autoplay: true, // 自动播放
          isLive: false, // 直播
          rePlay: false, // 循环播
          preload: true,
          controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
          useH5Prism: true, // 播放器类型：html5
        }, function(player) {
          console.log('播放器创建成功')
        })
      }
    }
  }
script>

第3步: 在你要进行播放视频的页面的对话框中添置播放器组件player.

    <el-dialog :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               :destroy-on-close="true"
               @close="playerVisible=false"
               style="text-align: center; width: 1700px;">
      <player :video="video" v-if="playerVisible">player>
    el-dialog>
    <div>
      <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css" />
      <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js">script>
    div>

注意看, 第一步说的资源引入代码块我是放在了对话框标签的外面, 也就是要在播放器创建之前就先加载资源.然后还用v-if=“playerVisible” 控制播放器的创建时机, 我这是为了控制当对话框渲染完成且视频数据获取到后才开始创建播放器, 不这样做的话容易报 播放器找不到容器 和 视频播放需要id 的错.

第4步: 在你要进行播放视频的页面的methods中添加控制相关的函数, 并在对应的点击事件中调用.

 playVideo(row){
        //console.log(row)
        this.dialogVisible=true
        this.video={}
        courseApi.getPlayAuth(row.vid)
          .then(response=>{
            this.video.vid=row.vid
            this.video.playauth=response.data.data.res.playAuth
            this.playerVisible=true
          })
          .catch(error=>{

          })
      },

注意: 我这里是在点击table表格中的一行触发打开弹窗, 这里需根据自己的页面实际情况进行编写

3. 效果展示

1. 点击播放列表中的一行
   

2. 弹出对话框进行视频播放
   

3. 点击全屏