微信内置浏览器视频播放技巧
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
关于微信内置浏览器播放视频的技巧:
1.原来使用object标签和embed标签可以在浏览器播放,现在微信内置浏览器下均不好使;
2.使用HTML5新增的video标签可以解决微信内置浏览器下的播放问题,但用户体验非常不理想。
解决办法:
使用videojs可以上述问题。
笔者试了几个版本,发现4.11的不错,可以较好地兼容各主流浏览器,下载地址:
https:///4.11/video.js
https:///4.11/video-js.css。
尽管使用videojs4.11可以解决上述问题,但视频播放后返回时缩略图处“黑洞”。
解决办法:
a.设置video标签缩略图属性poster为空
b.设置video标签样式属性style:
{
background-image:url(图片路径);
background-size: cover;
background-repeat:no-repeat;
}
Videojs4.11还具有标题、字幕功能,通过字幕文件实现;但现仅支持WebVTT格式字幕文件(*.vtt),其内容格式如下:
可通过Css改变标题、字幕的颜色和显示位置等:
<style type="text/css">
.video-js.vjs-captions{...}//标题
.video-js .vjs-subtitles{...}//字幕
</style>
注意:“.video-js”是必须有的!但从videojs4.12开始,及其以上版本不支持这种方式,而是使用界面设置来完成的,但webkit内核的浏览器却又不支持!晕!
国际化:
需要zh.js文件,其内容可以自定义,大致如下:
如果video标签没有language属性及值,就采取上述方式;否则采取下列方式:<video language="zh">:
如果国际化出现乱码,则使用记事本打开zh.js,然后按如下步骤操作即可:。