音频播放器使用文档

概述

Polyv 音频播放器是保利威云点播Web播放器的重要补充,主要应用于音频为主的业务场景,基于HTML5实现PC/移动端兼容,并深度融合了保利威视频云业务,如支持加密播放等,为用户提供简单、快速、安全、稳定的播放服务。

基础功能

  1. 支持播放上传到保利威平台的音视频文件,并且支持播放加密的音视频文件。
  2. 播放控制(播放、暂停,拖拽进度调整等)。
  3. 两套默认皮肤可选,也可以自定义样式。

格式支持

  • 音频格式:mp3、aac、m3u8
  • 音频编码:mp3、aac
  • 视频格式:mp4、m3u8
  • 视频编码:h264

注:
1. 如果上传文件时设置的是默认转码方式,所有的文件都会转码为视频文件,使用音频播放器播放视频文件时,只会播放声音,没有图像。
2. 如果上传文件时设置了"源文件播放",平台不会对源文件进行转码,播放器会直接播放源文件。建议上传mp3或aac格式的文件,其它音频格式文件,如3gp、ogg、wav、FLAC、mov等,能否正常播放取决于浏览器支持。
3. 如果上传视频文件时设置了“生成音频文件”,平台在转码时会额外转出一份mp3文件,音频播放器会播放该mp3文件。

适配情况

mp3 aac mp4 m3u8
iOS
Android 4.0+
Chrome 34+
Firefox 49+
IE IE9+ IE9+ IE9+ IE11+ for Windows 8.1+
Edge
Safari 8+

常见适配问题:
1. 设置autoplay=true无效,不会自动播放
- 移动端浏览器中音频自动播放一直是禁止的,目前通用的办法是通过用户手动触发播放(例如监听用户的点击事件并调用play方法),但不排除一些特性的浏览器和webview允许自动播放。
- PC端Chrome 55以上版本、MacOS High Sierra Safari 11以上的浏览器也都限制自动播放。
2. 音量调节功能(setVolume)在iOS和部分Android浏览器上不支持。
3. 倍速播放功能(setSpeed)在部分移动端浏览器上不支持,比如Android 微信。

集成方式

引入资源

<!-- 指定版本 -->
<script src="//player.polyv.net/resp/vod-audio-player/0.1.1/audio-player.min.js"></script>
<!-- 最新版本 -->
<script src="//player.polyv.net/resp/vod-audio-player/latest/audio-player.min.js"></script>

创建 HTML 节点

<div id="myAudioPlayer"></div>

创建播放器实例

const plvAudioPlayer = new PlvAudioPlayer({
  vid: '从 polyv 后台获取的 vid',
  wrap: '#myAudioPlayer',
  skin: 'white'
});

监听播放器事件

// 播放器初始化完毕
plvAudioPlayer.on('ready', function() {
  console.info('ready');
});

调用播放器方法,及获取播放器属性

// 切换加密视频
plvAudioPlayer.changeVid({
  ts: ts,
  sign: sign,
  vid: vid
});
// 获取音频文件当前播放进度
const currentTime = plvAudioPlayer.currentTime;

API 文档

参数设置

将所有参数以对象形式传入播放器,可以设置的属性包括:

名称 类型 是否必填 描述
vid string 上传到保利威平台的音视频的唯一ID
viewerInfo object 可选 观众信息(用于观看日志统计)。详见观众信息
wrap string 可选 需要载入播放器的css选择器
skin string 可选 播放器皮肤(white / grey),如果使用自定义播放器皮肤,则不需传该参数。
autoPlay boolean 可选 是否自动播放
loop boolean 可选 是否循环播放
volume number 可选 音量(范围0~1)
speed number 可选 倍速播放
startTime number 可选 从第几秒开始播放,需小于视频时长
playsafe function | string 可选 服务器计算出的 token。若要在PC端播放加密音视频才需要该参数,非加密音视频可忽略。详见创建playsafe token
playsafeUrl string 可选 业务方服务端获取 token 的接口,每次需要 token 时播放器会请求这个接口获取。
ts string 可选 移动端播放web加密音视频使用的 ts,非加密音视频可忽略。详见移动端Web加密说明
sign string 可选 移动端播放web加密音视频使用的 sign,非加密音视频可忽略

静态属性

可以通过 PlvAudioPlayer[key] 获取。

名称 类型 描述
EventType object 回调事件的汇总。

实例属性

每个播放器实例都有以下属性:

名称 类型 描述
audio object 原生的 audio 对象。
currentTime number 当前播放位置,单位:秒。
duration number 当前音频时长,单位:秒。
paused boolean 当前是否暂停状态。

实例方法

play()

开始播放。

pause()

暂停播放。

(async) changeVid(param)

切换媒体文件。

Parameters:
名称 类型 描述
param string | object vid 字符串。如果是加密视频,需要传入包含属性playsafe(PC端)、ts(移动端)、sign(移动端)、vid的对象。

seek(time)

跳转到指定位置。

Parameters:
名称 类型 描述
time number 指定位置的时长,单位为 s。

setLoop(val)

设置循环播放。

Parameters:
名称 类型 描述
val boolean 是否循环播放。

setSpeed(val)

设置播放的倍速。

Parameters:
名称 类型 描述
val number 倍速值,可选范围 0~16。非法值将默认设置为 1。

setVolume(val)

设置音量。

Parameters:
名称 类型 描述
val number 音量值,可选范围 0~1。非法值将默认设置为 1。

stop()

停止播放,停止后的音频再播放会从头开始。

(async) updateParam(param)

更新 param。会导致原来的音频结束播放,重新加载。

Parameters:
名称 类型 描述
param object 播放器参数

destroy()

销毁当前播放器实例。

事件

播放器提供了一些常用的事件回调,使用方法如:

// 播放器初始化完毕
plvAudioPlayer.on('ready', function() {
  console.info('ready');
});

目前提供的播放器方法包括以下:

ready

播放器初始化完毕,播放器提供的方法需在此事件发生后才可以调用。

Properties:
名称 类型 描述
data object 事件信息。可以通过 data.audioInfo 获取音频相关信息。

loadstart

在媒体开始加载时触发。

play

媒体播放时触发。

playing

播放中,会触发多次

pause

播放暂停时触发。

seeking

在跳跃操作开始时触发。

seeked

在跳跃操作完成时触发。

ratechange

在回放速率变化时触发。

timeupdate

元素的currentTime属性表示的时间已经改变。

waiting

在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发。

ended

播放结束时触发。

stop

stop方法完成后的回调。

hlsError

hls发生错误时触发。

serverError

发生播放错误时触发。

Properties:
名称 类型 描述
data object 报错信息。可以通过 data.code 获取报错信息的错误码。
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

自定义音频播放器(旧)

1 概述

根据polyv播放器现有参数、接口、事件。实现pc/移动端兼容的音频播放器,可自定义播放器样式。

1.1 特性

基础功能

  • [✓]支持IOS、Android主流厂商及机型
  • [✓]支持IE10+, chrome等主流浏览器
  • [✓]支持多种视频编码格式(h264, mpeg4)
  • [✓]支持主流的视音频格式
  • [✓]播放控制(播放、暂停,拖拽进度调整)

2 开发准备

音频播放器使用audio标签进行播放,优点:节省流量。因此需要准备音频文件。保利威视后台生成音频文件有以下两种方法:

  • (1)音频源文件上传,如mp3文件,具体上传步骤可参考源文件播放
  • (2)后台开启生成音频文件,具体生成音频文件可参考音频播放器使用

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 播放控制

播放控制包括:暂停、继续、停止、获取当前播放时间、播放状态触发等,相关函数如下:

选项

useAudio

* 类型:Boolean
* 说明:是否使用音频模式

ban_ui

* 类型:Boolean
* 说明:是否隐藏播放器皮肤

hidePlayBtn

* 类型:Boolean
* 说明:是否隐藏播放器大播放按钮

forceHTML5

* 类型:Boolean
* 说明:是否使用H5播放器
* 注意: 使用H5播放器可防止部分浏览器屏蔽FLASH播放器的情况

接口

j2s_resumeVideo

* 说明:执行播放器播放动作

j2s_pauseVideo

* 说明:执行播放器暂停动作

j2s_getVideo

* 说明:获取播放器video标签实例
* 返回值说明:返回video节点
* 获取视频结束播放状态示例:player.j2s_getVideo().ended

j2s_getDuration

* 说明:获取当前播放视频总时长
* 返回值:Number(单位:秒)
* 注意: 需要在s2j_onPlayStart事件触发后再执行,否则返回0

j2s_seekVideo

* 说明:控制播放器SEEK功能
* 传参说明:秒数
* 使用示例:player.j2s_getVideo(50)

j2s_getCurrentTime

* 说明:获取视频播放当前时间
* 返回值:秒数

事件

s2j_onPlayStart

* 说明:播放开始时触发,播放过程中只触发一次

s2j_onVideoPlay

* 说明:播放开始时触发,播放过程中触发多次

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...

音视频切换功能

开启

1、描述:开通视频转音频的用户可在后台开启生成音频文件,开启后,在对视频文件转码时,会额外生成一份音频文件,在播放器上可进行视频/音频的切换。

2、设置----->视频设置----->生成音频文件设置。
播放器设置----->创建/修改----->皮肤设置选择:简雅蓝/高贵金/清新绿
b68615ddgy1fmcufedt1xj20jz0b9408
播放器中的音视频切换功能展示
b68615ddgy1fmez3s5xbqj20m60d9gp8

参数

参数 类型 默认值 取值 说明
priorityMode String video video/audio 有音频时,优先播放模式
audioMode Boolean true true/false 有音频时,是否显示音频

接口

接口名 参数类型 参数 说明
方法 getCurrentMode() String video/audio 获取当前播放模式,视频模式或音频模式
setMode(value) String video/audio 设置当前播放模式,视频模式或音频模式
事件 onChangeMode(value) String vid, currentSelectMode, preSelectMode 切换播放模式时触发,currentSelectMode为新选择的模式,preSelectMode为之前选择的模式

示例

var mode = player.getCurrentMode();
console.log(mode) // video/audio
player.setMode('video');
window.onChangeMode = function(vid, currentSelectMode, preSelectMode){
console.log(vid, currentSelectMode, preSelectMode);
}
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...