cocos2d-js 视频播放小屏

问题

在大学的时候,做过 cocos2d-x 开发,这次有个小项目,就准备用 cocos2d-js 写,用法都差不多,语言不一样而已。 这次还是碰到了一些坑,记录下踩坑过程!

然后里面用到视频播放组件的时候,发现出了一些问题,不得不说,cocos 的坑还是不少的

都知道微信h5中设置视频小屏播放的策略,给video 标签加属性。

但是在cocos2d引擎里不怎么好加啊!

深入到 cocos2djs 的引擎代码,查看它内部是怎么设置属性的,看到可以添加一些样式,但是我要的那些属性却添加不了,当然,也有可能是我的姿势不对。

研究了大概一天吧,后来想到一个方法,还是不在引擎源码里动手脚了。

解决

在添加完 videoPlayer 组件之后,利用原生jsdom进行操作。给 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-playsinlineplaysinline 会在苹果手机上起作用, 下面的是安卓端微信对内置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)

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

你可能感兴趣的:(cocos2d-js 视频播放小屏)