微信内置浏览器视频播放技巧
- 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，然后按如下步骤操作即可：。