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

admin

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字符串都可以添加自定义事件

接口属性说明

  • closePreviewLayer试看结束之后关闭播放器中间的提示信息的试看组件方法

试看组件下载

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

文章版权声明:除非注明,否则均为十八码原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 1 条评论,1007人围观)
网友昵称:120589497@qq.com
120589497@qq.com V 评论者 沙发
11-17 回复
谢谢大哥

目录[+]