阿里云H5播放器Aliplayer - 试看功能，试看结束弹出开通会员提示框

Aliplayer

Aliplayer 试看组件

其他语言：English

用于用户试看，试看结束后提示用户，观看完整版的条件（试看结束弹出开通会员提示框）

完整试看Demo

<style>
    .vip-join {
      color: #00c1de;
    }

    .vip_limit_content {
      display: flex;
      width: 100%;
      height: 100%;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .vip_limit_content .title {
      font-size: 18px;
      line-height: 36px;
      color: #fff;
      text-align: center;
      width: 100%;
    }

    .vip_limit_button_box {
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
    }

    .vip_limit_btn {
      display: inline-block;
      min-width: 100px;
      position: relative;
      background: #f60;
      padding: 0 35px;
      margin: 0px 5px 20px 5px;
      border-radius: 38px;
      font-size: 18px;
      line-height: 38px;
      color: #623A0C;
      text-align: center;
      background-image: linear-gradient(-135deg, #FBE8A8 0%, #F8E7AC 15%, #E2C078 100%);
      cursor: pointer;
    }

    .vip_limit_close {
      text-align: center;
    }
    .vip_limit_close span {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 36px;
      background: rgba(165, 165, 165, 0.54);
      border-radius: 50%;
      font-size: 24px;
      cursor: pointer;
    }
</style>

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/Aliplayer-min.CSS" />
<script charset="utf-8" type="text/JavaScript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script>
<script charset="utf-8" type="text/JavaScript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>
<script charset="utf-8" type="text/javascript" src="aliplayercomponents-1.0.9.min.js"></script>
<div id="player"></div>
<script type="text/template" id="endPreviewTemplate">
  <div class="vip_limit_content">
    <div class="vip_limit_wrap">
      <p class="title">Purchase Full Version</p>
      <div class="vip_limit_button_box">
        <a class="vip_limit_btn">开通VIP会员</a>
      </div>
      <div class="vip_limit_close"><span class="vip_limit_close_btn">x</span></div>
    </div>
  </div>
</script>

var player = new Aliplayer({
    id: "player",//容器
    source: "https://www.18ma.cn/static/demo.M3U8",//视频地址
    width: "100%",//宽度
    height: "100%",//高度
    autoplay: false,//自动播放
    components: [{
      name: 'PreviewVodComponent',
      type: AliPlayerComponent.PreviewVodComponent,
      args: [10, '#endPreviewTemplate', '<a href="https://www.18ma.cn" target="_blank" class="vip-join">开通会员</a> 观看完整视频']
    }]
  }, function (player) {
    console.log("The player is created");

    /* You can register a click event with the custom DOM string to trigger an action, for example, to pop up a dialog box for VIP registration. */
    var vip_limit_btn = document.querySelector('.vip_limit_btn')
    vip_limit_btn.addEventListener('click', function() {
      confirm('确认开通会员吗?')
    })

    var close_btn = document.querySelector('.vip_limit_close_btn')
    close_btn.addEventListener('click', function() {
      /* Call the closePreviewLayer method to close the dialog box */
      player.getComponent('PreviewVodComponent').closePreviewLayer()
    })
  });

使用说明

引入当前组件，播放器配置中添加如下代码：

components: [{
name: 'PreviewVodComponent',
type: AliPlayerComponent.PreviewVodComponent,
/**
*试看组件共有三个参数：previewDuration，previewEndHTML, previewBarHTML
* previewDuration:试看时长，单位为秒，如果不需要开启试看的话，设置为0，当开启会员或购买之后设置为0！
* previewEndHtml:试看结束之后，出现在播放器中间的Dom字符串或者父节点的'#' + id，默认为null
* previewBarHtml:播放器左下角，提示试看时长之后的Dom字符串或者父节点的'#' + id，同样可自定义样式，默认为null
* tips: previewEndHtml，previewBarHtml可以像例子中的那样，<script type=“text/template”id=“endPreviewTemplate”>在script标签中插入html
* tips: previewEndHtml，previewBarHtml也可以直接使用Dom字符串，推荐使用es6的模板字符串可以很方便地插入Dom字符串
*/
args: [previewDuration，previewEndHtml, previewBarHtml]
}]

该组件接收三个参数：

previewDuration, previewEndHtml, previewBarHtml

previewDuration，Number类型，试看时长（单位为秒，value > 0)
previewEndHtml, 试看结束后显示在播放器中间的DOM字符串，可选参数，默认为null，可以两种方式设置previewEndHtml

/**
*方式一，script标签设置type=“text/template”，并设置一个id
*在script中写入需要插入到previewEndHtml的html
* previewEndHtml传入script的id
*/
// html
<script type=“text/template”id=“endPreviewTemplate”>
<div>previewEndHtml插入的元素</div>
</script>
//试看组件参数配置，previewEndHtml传入'#endPreviewTemplate'
args: [previewDuration，'#endPreviewTemplate'，previewBarHtml]
/**
*方式二，直接传入DOM字符串
*/
//试看组件参数配置，使用es6模板语法，传入字符串
args: [previewDuration，`<div>previewEndHtml插入的元素</div>`，previewBarHtml]

previewBarHtml, 显示在播放器左下角的DOM字符串，可选参数，默认为null，和previewEndHtml的设置一样有两种方式设置previewBarHtml

自定义的DOM字符串都可以添加自定义事件