阿里云Aliplayer播放器 - 播放前图片广告和暂停图片广告功能组件

阿里云Aliplayer播放前和暂停时广告组件

视频即将开始播放时和暂停时显示的图片广告组件

Aliplayer组件使用方法

引入阿里云Aliplayer播放器CDN和组件

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

 阿里云Aliplayer播放器配置中添加如下代码:

var player = new Aliplayer({
    id: "player",//容器
    source: "https://18ma.cn/static/demo.M3U8",//视频地址
    width: "100%",//宽度
    height: "100%",//高度
    autoplay: false,//自动播放
    preload: true,//预加载
    rePlay: false,//循环播放
    cover:"",//视频封面
    isLive:false,//直播模式
    playsinline: true,//H5是否内置播放，有的Android浏览器不起作用。
    useH5Prism: true,//指定使用H5播放器。
    controlBarVisibility: 'click',//控制栏显示方式
    showBarTime: '5555',//控制栏自动隐藏时间
    components: [{
	//启动广告图片
      name: 'StartADComponent',
      type: AliPlayerComponent.StartADComponent,
      args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://18ma.cn', 10]
    }, {
	//暂停广告图片
      name: 'PauseADComponent',
      type: AliPlayerComponent.PauseADComponent,
      args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://18ma.cn']
    }]
  });

播放前组件接收三个参数:

coverUrl, adUrl, adDuration

coverUrl, String 类型, 广告图片URL
adUrl, String 类型, 广告链接
adDuration, Number 类型, 广告时长, 单位为秒

暂停时组件接收二个参数:

coverUrl  adUrl

coverUrl: the URL of the image ad. The type is String.
adUrl: the URL of the ad page. The type is String.

阿里云Aliplayer播放器组件下载: