Aliplayer 阿里云播放器自定义视弹出框 包含全屏

<div class="prism-player" id="player-con" :style="{overflow:'hidden',width: '795px',height:'100%'}"></div>

    <!-- 浮层 -->
    <script type="text/template" id="endPreviewTemplate">
       <!-- 所有弹出框的内容都放在vip_limit_content这个里面 -->
      <div class="vip_limit_content">
        <!-- 兑换弹框 -->
        <!-- 注意想给vip_limit_wrap添加css 须在前面加/deep/ -->
        <div class="vip_limit_wrap" id="vip_limit_wrap">
          <div class="enjoyCenter">
            <div class="enjoyTitle">观看完整适应性培训课程，请使用尊享卡兑换</div>
            <div class="enjoyContent">
              <div class="iptWrap">
                <span>兑换码</span>
                <input type="text" placeholder="请输入兑换码" id="inpVal">
                <!-- <myIpt 
                  class="textWrap"
                  :iptInfo="{ value: exchangeCode, placeholder: '请输入兑换码'}"
                  @iptValChange=" (val) => {exchangeCode = val}"/> -->
              </div>
              <div class="enjoyBtn">
                <div class="customButton cancelBtn" id="cancelBtn">取消</div>
                <div class="customButton confirmBtn" id="confirmBtn">兑换</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 提示弹框 -->
        <div class="prompCenter" style="display:none">
          <div class="prompTitle" id="status"></div>
          <div class="prompCenterWrap" id="prompCenterWrap">
          </div>
        </div>
      </div>
    </script>

// 创建视频   
 getInit(){
      let self = this;
      if(this.player){ this.player.dispose();}// 是销毁之前的视频，不销毁的话，它会一直存在。
      // "0"不是尊享卡/"1"是尊享卡
      let time = this.honorableCardFlag==0?600:0;
	    this.player = new Aliplayer({
          "id": "player-con",
          "source": self.vedioUrl,
          "width": "100%",
          "height": "100%",
          "isLive": false,// 直播是true 录播是false
          "rePlay": false, // 重复播放
          "playsinline": true, // 非全屏模式（即内联的方式）
          "preload": true, // 播放器自动加载，目前仅H5可用。
          "controlBarVisibility": "always", // 功能条显示方式 never 隐藏整个控制面板
          "diagnosisButtonVisible":false,
          "autoplay":false,// 自动播放
          "useH5Prism": true, // 启用H5播放器
          "components": [{
            "name": 'PreviewVodComponent',
            "type": AliPlayerComponent.PreviewVodComponent,
            "args": [time, '#endPreviewTemplate','<span id="payClass">购买课程</span> 观看完整视频']// 第三个参数是显示可是看后面的文字
          },
          {
            name: 'RateComponent',
            type: AliPlayerComponent.RateComponent
          }]
        }, function (player) {
          document.getElementsByClassName('preview-component-layer')[0].style['position'] = 'absolute'; // 这个写了才能依赖于视频做弹出框 要不然就是浏览器可视区域的宽高
          // 弹出框确定按钮
          document.getElementById('confirmBtn').addEventListener("click",function(){
            var value=document.getElementById('inpVal').value;// 获取弹出框内input的输入内容
            
          });
          // 弹出框取消按钮
          document.getElementById('cancelBtn').onclick=function(){
            document.getElementById('inpVal').value = ''; // 弹出框input内容置空
            document.getElementsByClassName('preview-component-layer')[0].style.removeProperty('display'); //移除弹出成的display（隐藏弹出框）
          }
        }
      );
	  },

 

 阿里云的视频会有一个classList的报错 这个没关系 他们文档上的例子也报错 

注意：写弹出框，都是用原生写

注意：所有弹出框的内容都放在vip_limit_content这个里面

注意：要想用弹出框需要引入aliplayercomponents-1.0.8.min.js文件

注意：想给vip_limit_wrap添加css 须在前面加/deep/