自定义音频播放器

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