1 概述
根据polyv播放器现有参数、接口、事件。实现pc/移动端兼容的音频播放器，可自定义播放器样式。
1.1 特性
基础功能
- [✓]支持IOS、Android主流厂商及机型
- [✓]支持IE10+, chrome等主流浏览器
- [✓]支持多种视频编码格式（h264, mpeg4）
- [✓]支持主流的视音频格式
- [✓]播放控制（播放、暂停，拖拽进度调整）
2 开发准备
音频播放器使用audio标签进行播放，优点：节省流量。因此需要准备音频文件。保利威视后台生成音频文件有以下两种方法：
3 快速开始
4 创建自定义音频播放器
4.1 引入相关资源
打开index.html
(1)在<head>中引入polyvAudio.css
<link href="polyvAudio.css" rel="stylesheet">
(2)引入相关js文件
<script src="jquery3.3.1.min.js"></script>
<script src="//player.polyv.net/script/polyvplayer.min.js"></script>
<script src="polyvAudio.js"></script>
(3)设置dom节点
<div class="wrap polyvAudio">
<div id="audio_area" class="db audio_area">
<div class="audio_area_left">
<div id="audio_play_area" class="audio_play_area">
<i class="icon_audio_playing"></i>
<i class="icon_audio_pausing"></i>
</div>
</div>
<div id="audio_area_right" class="audio_area_right">
<div class="audio_info">
<div class="db audio_info_area">
<strong class="db audio_title">保利威视宣传音频</strong>
</div>
<div id="audio_slide_bar" class="audio_slide_bar">
<div id="audio_progress" class="progress_bar" style="width: 0%;"></div>
<div id="audio_progress_bg" class="progress_bar_bg"></div>
<div id="audio_progress_dot" class="audio_progress_dot"></div>
</div>
<div class="audio_time tips_global">
<span id="audio_curren_time" class="audio_current">00:00</span>
<span class="audio_separator">/</span>
<span id="audio_length" class="audio_length">00:00</span>
</div>
</div>
</div>
</div>
</div>
<div id="audio" class="audio_player"></div>
（4）嵌入播放器并设置参数调用音频模式
如2开发准备说明，可以通过以下两种方式设置对应参数嵌入播放器。
- 示例一
var player = polyvObject('#audio').videoPlayer({
width: '1',
height: '1',
vid: 'accb9f485b10c10478651a4e61d49425_a',//源文件播放
useAudio: true,
ban_ui: true,
hidePlayBtn: true,
forceHTML5: true
});
- 示例二
var player = polyvObject('#audio').videoPlayer({
width: '1',
height: '1',
vid: 'accb9f485b180ec89afd18f9c8756bc2_a',//音频播放器使用
priorityMode: 'audio',
ban_ui: true,
hidePlayBtn: true,
forceHTML5: true
});
（5）关联自定义控制栏，并传入播放器实例
var polyvAudioObj = $('.polyvAudio').polyvAudio({
player: player
});
4.2 播放控制
播放控制包括：暂停、继续、停止、获取当前播放时间、播放状态触发等，相关函数如下：
选项
* 类型：Boolean
* 说明：是否使用音频模式
* 类型：Boolean
* 说明：是否隐藏播放器皮肤
* 类型：Boolean
* 说明：是否隐藏播放器大播放按钮
* 类型：Boolean
* 说明：是否使用H5播放器
* 注意: 使用H5播放器可防止部分浏览器屏蔽FLASH播放器的情况
接口
* 说明：执行播放器播放动作
* 说明：执行播放器暂停动作
* 说明：获取播放器video标签实例
* 返回值说明：返回video节点
* 获取视频结束播放状态示例：player.j2s_getVideo().ended
* 说明：获取当前播放视频总时长
* 返回值：Number(单位:秒)
* 注意: 需要在s2j_onPlayStart事件触发后再执行，否则返回0
* 说明：控制播放器SEEK功能
* 传参说明：秒数
* 使用示例：player.j2s_getVideo(50)
* 说明：获取视频播放当前时间
* 返回值：秒数
事件
* 说明：播放开始时触发,播放过程中只触发一次
* 说明：播放开始时触发,播放过程中触发多次
Loading...
