嵌入视频专区视频

已知问题

先来定义两个概念，仅在Android 微信下存在，方便之后我们理解问题描述：

• 同层播放器：微信自动产生黑边遮盖视频以外区域，会有拉伸动画，但可以在视频上叠加内容元素（比如清晰度选择控件）
• 微信原生播放器：会自动全屏播放，没有过渡动画，但也不能在视频上叠加内容元素

目前在Android 微信下已知问题列表：

• 一个页面有多个同层播放视频，最后一个视频播放时会产生错位
• 使用iframe+同层播放时，iframe 高度过低会导致播放时画面闪烁
• 使用iframe+原生播放器时，iframe 无法被隐藏（比如有多个Tab Panel 显示内容）

独立播放器页面

正式环境

http://vs.lenovo.com.cn/player.html?vid=11&source=robot.lenovo.com.cn

测试环境

http://test.vs.lenovo.com.cn/player.html?vid=11&source=robot.lenovo.com.cn

参数：

• vid，视频ID，必填
• source，来源网站，选填
• playerMode，默认为null，Android微信下播放模式（可选值：inside、x5），选填
• adapt，内容适配高度（单位px），选填

数据统计中来源的优先级：

• source
• 父级域名，比如知识库
• 本地域名，只有 vs.lenovo.com.cn

后台生成的iframe 代码

iframe min height 只是针对知识库给出了相对合适的高度。

<iframe src="http://vs.lenovo.com.cn/player.html?vid=700&source=http://iknow.lenovo.com/"
                        frameborder="0" style="width: 100%;min-height: 360px;"></iframe>

针对Android 微信环境下独立播放器代码

UMD 方式

UMD(Universal Module Definition) 通用模块定义，是可以兼容浏览器环境的模块方式。

可以使用Dom 和data api 来表述视频信息，在这种模式下可以不用vsConfig 来配置。

<div data-type="vs-player" data-vid="672"></div>
<!--放在底部-->
<link rel="stylesheet" href="http://vs.lenovo.com.cn/static/lib/independent.min.style.css">
<script src="http://vs.lenovo.com.cn/static/lib/independent.min.js"></script>

动态构建iframe 方式

这里将动态计算iframe 高度，在PC和移动端有良好的适配。

注意
- 当在一个页面中存在tab 切换内容显示时，应该使用x5同层播放，否则Android 微信会将video 提升，导致切换内容失效。
- 注意，这里依赖jQuery，所以务必在jQuery之后引入本脚本

vsConfig 参数：

• vid，视频ID，必填
• source，来源网址，默认是当前页面域名，非必填
• host，目标域名，默认是vs.lenovo.com.cn，非必填

<script>
    var vsConfig = {
        vid: 672
    };
</script>
<script src="http://vs.lenovo.com.cn/static/js/player.mode.js"></script>