web实践Video视频应用——推荐aliyun播放器

公司是一个视频社交平台，H5也免不了使用video标签，经久实践（也可能是技术不达标）配置vue-video-player播放m3u8文件很多坑点，要配置很多东西，加配个plugin —— videojs-contrib-hls，基于videojs玩儿起来有点费劲，很难受。

基于业务，我们还是需要一个快、狠、准的API来做业务，那么测试aliyun播放器还特么扣以。

填入source，即用即放，简单开发使用的配方。

如果使用aliyun点播的童鞋还可以使用到更多的配置方向的东西，没有接入aliyun点播的话也可以直接引入script标签直接使用，可以说是开箱即用了。

废话少叙，代码介入~（代码是vue的代码）

名称	类型	说明
id	String	播放器外层容器的dom元素id。
source	String	视频播放地址url：单独url，默认状态，表示使用vid+playauth，source播放方式优先级最高，source支持多清晰度设置：source:’{“HD”:”address1”,”SD”:”address2”}’ 。详情参见 4.7 节。
vid	String	媒体转码服务的媒体Id。
playauth	String	播放权证，如何得到参见 获取playauth。
height	String	播放器高度，可形如‘100%’或者‘100px’chrome浏览器下flash播放器分别不能小于397x297。
width	String	播放器宽度，可形如‘100%’或者‘100px’chrome浏览器下flash播放器分别不能小于397x297。
videoWidth	String	视频宽度，仅h5支持。详情参见 4.6 节。
videoHeight	String	视频高度，仅h5支持。详情参见 4.6 节。
preload	Boolean	播放器自动加载，目前仅h5可用。
cover	String	播放器默认封面图片，请填写正确的图片url地址 需要preload和autoplay为’false’时，才生效Flash播放器封面也需要开启 允许跨域访问。
isLive	Boolean	播放内容是否为直播，直播时会禁止用户拖动进度条。
autoplay	Boolean	播放器是否自动播放，在移动端autoplay属性会失效。 Safari11不会自动开启自动播放 如何开启。
rePlay	Boolean	播放器自动循环播放。
useH5Prism	Boolean	指定使用H5播放器。
useFlashPrism	Boolean	指定使用Flash播放器。
playsinline	Boolean	H5是否内置播放，有的Android浏览器不起作用。
showBuffer	Boolean	显示播放时缓冲图标，默认true。
skinRes	Url	说明：皮肤图片，不建议随意修改该字段，如要修改请参照皮肤定制。
skinLayout	Array Boolean	说明：功能组件布局配置，不传该字段使用默认布局传false隐藏所有功能组件，请参照皮肤定制。
controlBarVisibility	String	控制面板的实现，默认为‘hover’，可选的值为：‘click’、‘hover’、‘always’。
showBarTime	String	控制栏自动隐藏时间（ms）。
waterMark	url pos size alpha	添加水印。数据格式：url pos size alpha（目前仅支持flash）。示例：waterMark：“logo.jpg TL 0.15 0.5” url：水印图片（jpg/png） pos：位置（TL/TR/BL/BR） size：logo宽度占播放器比例（0-1，默认0.2） alpha：透明度（0-1，默认1）
extraInfo	String	说明：JSON串用于定制性接口参数，目前支持：1.“liveRetry”：1 直播流中断是否重试。2.“fullTitle”：“测试页面” 全屏时显示视频标题（仅flash支持）。3. “m3u8BufferLength”：“30” 播放m3u8时加载缓存ts文件长度单位（秒）（仅flash支持）。4. “liveStartTime”：“2016/08/17 12:00:00” 直播开始时间，用于提示直播未开始(仅flash支持)。5. “liveOverTime”：“2016/08/17 14:00:00” 直播结束时间，用于提示直播结束（仅flash支持）。
enableSystemMenu	Boolean	是否允许系统右键菜单显示，默认为false。
format	Sting	指定播放地址格式，只有使用vid的播放方式时支持。可选值为’mp4’、’m3u8’、’flv’、’mp3’，默认为‘mp4’。
mediaType	Sting	指定返回音频还是视频，只有使用vid的播放方式时支持可选值为’video’和’audio’，默认为’video’‘audio’主要是针对只包含音频的视频格式，比如音频的mp4。
qualitySort	Sting	指定排序方式，只有使用vid+plauth播放方式时支持‘desc’表示按倒序排序（即：从大到小排序）‘asc’表示按正序排序（即：从大到小排序）默认值：‘asc’。
x5_type	String	声明启用同层H5播放器，启用时设置的值为‘h5’ 详情参见 同层播放。
x5_fullscreen	Boolean	声明视频播放时是否进入到TBS的全屏模式，默认为false当需要把视频做为背景时，设置为true详情参见 同层播放。
x5_video_position	String	声明视频播在界面上的位置，默认为“center”可选值为：“top”，“center”详情参见 同层播放。
x5_orientation	String	声明TBS播放器支持的方向，可选值：landscape：横屏 portraint：竖屏 详情参见 同层播放。
autoPlayDelay	Number	延迟播放时间，单位为秒详情参见 延迟播放
autoPlayDelayDisplayText	String	延迟播放提示文本详情参见 延迟播放
language	String	国际化，默认为‘zh-cn’如果未设置，则采用浏览器语言可选值为‘zh-cn’o、‘en-us’或其它值。
languageTexts	JSON	自定义国际化文本json结构，key的值需要和language属性值对应起来例子：{jp:{Play:”Play”}} 自定义值参见 Json结构
snapshot	Boolean	flash启用截图功能。
snapshotWatermark	Object	H5设置截图水印。
useHlsPluginForSafari	Boolean	Safari浏览器可以启用Hls插件播放，Safari 11除外。
enableStashBufferForFlv	Boolean	H5播放flv时，设置是否启用播放缓存，只在直播下起作用。
stashInitialSizeForFlv	Number	H5播放flv时，初始缓存大小，只在直播下起作用。
loadDataTimeout	Number	缓冲多长时间后，提示用户切换低清晰度，默认：20秒。
liveStartTime	String	直播开始时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。
liveOverTime	String	直播结束时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。
liveTimeShiftUrl	String	直播可用时移查询地址，详情参见 直播时移。

可见设置其实也很多，但是相对来说比较丰富简单。

首先，引入aliyun播放器的script是必要的

/*
首先是css文件，样式
其次是js文件
当你需要自定义的时候，可以不使用其css文件
*/

其次就是使用了，下面代码：

参考文档:

• Web播放器
• web播放器常见问题
• 如何启用H5的同层播放
• 产品介绍
• Java版
• 如何使用皮肤