问题
在大学的时候，做过 cocos2d-x 开发，这次有个小项目，就准备用 cocos2d-js 写，用法都差不多，语言不一样而已。 这次还是碰到了一些坑，记录下踩坑过程！
然后里面用到视频播放组件的时候，发现出了一些问题，不得不说，cocos 的坑还是不少的 😂
都知道微信h5中设置视频小屏播放的策略，给video 标签加属性。
但是在cocos2d引擎里不怎么好加啊！
深入到 cocos2djs 的引擎代码，查看它内部是怎么设置属性的，看到可以添加一些样式，但是我要的那些属性却添加不了，当然，也有可能是我的姿势不对。
研究了大概一天吧，后来想到一个方法，还是不在引擎源码里动手脚了。
解决
在添加完 videoPlayer 组件之后，利用原生js对dom进行操作。给 video 标签动态添加属性。这个想法说出来有点普通，但是当时真的没想到啊！ 代码如下：
创建 videoPlayer 组建
var player = new ccui.VideoPlayer(res.s_video)
this.addChild(player, 1, 1)
this.videoPlayer_ = player
player.setContentSize(395, 290)
player.setPosition(g_size.width * 0.5, -145)
var that = this
player.setEventListener(ccui.VideoPlayer.EventType.COMPLETED, function () {
console.log("over")
})
geek_game_setup_video()
动态修改 video 标签的属性
function geek_game_setup_video() {
var video = document.getElementsByClassName("cocosVideo")[0]
if (video) {
video.setAttribute("webkit-playsinline", "true")
video.setAttribute("playsinline", "true")
video.setAttribute("x5-playsinline", "true")
video.setAttribute("x5-video-player-type", "h5")
// video.setAttribute("x5-video-orientation", "portraint")
// video.setAttribute("x5-video-player-fullscreen", "true")
video.setAttribute("controls", "true")
}
}
前面两个属性 webkit-playsinline 和 playsinline 会在苹果手机上起作用， 下面的是安卓端微信对内置x5 浏览器的适配。
延伸
由于设置了 controls 标签， 播放器会显示一些内置的组件，比如播放，快进，全屏这些。
所以我又要隐藏全屏的按钮。
在css 样式上，添加如下：
video::-webkit-media-controls-fullscreen-button {
display: none;
}
这样就 ok 了
后续
在安卓手机上访问会发现，非常模糊，要说分辨率不够，也应该是 iphone 上模糊呀。
查到网上有以下修改方式
原引擎代码如下：
var devicePixelRatio = view._devicePixelRatio = 1;
if (view.isRetinaEnabled())
devicePixelRatio = view._devicePixelRatio = window.devicePixelRatio || 1;
在安卓上，devicePixelRatio 会背设置为 1， 导致显示模糊， 所以把上面直接修改为：
devicePixelRatio = view._devicePixelRatio = window.devicePixelRatio || 1;
就可以清楚的显示了
但是！
前面说到的 videoPlayer 组件不显示了！
猜想是设置 devicePixelRatio 的原因。
查看源码发现，videoPlayer 内部也引用到了 view.isRetinaEnabled() 判断来绘图，所以上面设置 devicePixelRatio 和 这边产生了冲突。
把上面的代码恢复了，后来又找到另一种方法可以统一设置。在引擎代码完全启动后，设置如下:
cc.view.enableRetina(true)
这样在安卓上也能正常显示了。
