cocos2d-js 视频播放小屏

问题

在大学的时候，做过 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)

这样在安卓上也能正常显示了。