文档首页 > > 播放器SDK> Web播放器> 播放器属性和接口

播放器属性和接口

分享
更新时间:2020/09/24 GMT+08:00

属性

可以通过以下两种方式设置相关属性:

  • 通过video标签的data-setup属性。
    <video data-setup='{"autoplay":"true",.....}'
  • 通过构造函数HWPlayer中的optiongs设置(推荐方式)。
    var player = new HWPlayer('test',{autoplay:true,....}) 

播放器常用属性如表1所示。更多options参数配置说明请参见Video.js

表1 常用属性列表

参数

参数说明

autoplay

播放器准备好之后,是否自动播放。

取值为true/false,默认为false。

controls

是否有控制条。

取值为true/false。

height

表示视频容器的高度。

取值为字符串或数字,单位为像素。

例如:height:300或者height:'300px'。

width

表示视频容器的宽度。

取值为字符串或数字,单位为像素。

loop

视频播放结束后,是否循环播放。

取值为true/false。

muted

是否静音。

取值为true/false。

poster

播放前显示的视频画面,播放开始后自动移除。通常传入一个URL。

playbackRates

倍速播放设置。

取值为数组类型,播放器已默认开启倍速播放显示开关并配置常用倍速,若有特殊需求也可自行设置,比如直播不需倍速可设置为[]。

例如:[0.5, 1, 1.5, 2]

preload

预加载。

取值为字符串,如下所示:
  • auto(缺省值):自动。
  • metadata:元数据信息 ,比如视频长度,尺寸等。
  • none:不预加载任何数据,直到用户开始播放才开始下载。

sources

表示资源文件,取值类型Array。

例如:

new HWPlayer('test',{
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

waiting

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

方法

播放器初始化后,常使用的方法如表2所示。具体API说明请参考Player Methods

表2 常用方法列表

方法

参数

说明

play()

启动播放。

pause()

暂停播放。

currentTime()

获取当前播放时间。

currentTime(time)

time:跳转时间,单位为秒。

设置当前播放时间,表示跳转到某个时间进行播放。

duration()

获取播放视频的时长。

src()

获取播放视频的地址。

src({src:url,type:type})

  • url:视频地址,如vodtest.mp4。
  • type:视频类型,必须设置,否则可能无法解析视频。

设置播放视频的地址。

视频格式和对应的type:

  • m3u8:application/x-mpegURL
  • mp4:video/mp4
  • flv:video/flv
  • mpd:application/dash+xml
  • rtmp:rtmp/flv

poster()

获取播放视频的封面地址。

poster(picture)

picture:图片地址,该地址需要设置允许跨域访问。

设置播放视频的封面地址。

updateSrc(sharpness)

说明:

直播播放暂不支持该方法。

sharpness:视频清晰度,包含如下参数:
  • src:视频地址。
  • type:视频格式类型,如“video/mp4”。
  • label:显示的清晰度标签,可设置为“原画”、“高清”、“标清”、“流畅”。

设置视频清晰度切换。

videoPlayer.updateSrc([
    {
        src: "//path/to/OP.mp4",
        type: 'video/mp4',
        label: '原画'
    },
    {
        src: "//path/to/HD.mp4",
        type: 'video/mp4',
        label: '高清'
    },
    {
        src: "//path/to/SD.mp4",
        type: 'video/mp4',
        label: '标清'
    },
    {
        src: "//path/to/FLUENT.mp4",
        type: 'video/mp4',
        label: '流畅'
    }
]);

loadSubtitles(url)

url:字幕文件的地址。

加载字幕。

事件

播放器支持的常用事件如表3所示,事件的相关详情说明请参见Video.js

表3 常用事件列表

事件

说明

loadstart

在媒体开始加载时触发。

loadedmetadata

媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。

loadeddata

媒体的第一帧已经加载完毕。

play

播放。

firstplay

首次播放。

progress

当浏览器开始下载音视频时触发。当前已下载的总计信息可以在元素的buffered属性中获取。

timeupdate

播放时间更新。

pause

暂停。

ended

播放结束。

error

播放报错。

resize

视频尺寸改变。

fullscreenchange

切换全屏。

durationchange

视频时长改变。

volumechange

音量变化。

  • 通过播放器实例的on方法绑定事件。
    videoPlayer.on(“play”, function(){   
    });
  • 通过播放器实例的removeEvent移除事件。
    videoPlayer.removeEvent(“eventName”, myFunc);
分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问