最近项目需要导出web端的游戏，之前将ios和android 的videoplayer上添加按钮弄完了，但是碰到web端还是有点懵逼，因为网页0基础，再次感谢我的web端同事，在他的帮助下，大致实现了。下面我们来看看原理。
1.web端的视频播放器
2.用chrome打开开发者后台
3.Cocos2dGameContainer是外层容器，GameCanvas应该是游戏渲染层（所有游戏的界面），而video就是我们拖上去的videoplayer, 这个video实际上就是web端一个原生控件，所以video始终是盖在游戏渲染层上面的，我们在游戏层创建的按钮都会被覆盖。
4.了解这些以后我们还需要知道一点，就是creator里面可以直接用web语法！！！！！！小白的我尝试了一下，果然可以。我们需要做的是不用cocos提供的videoplayer组件，直接自己用web语法加一个。。然后就可以在上面加按钮之类的
废话不多说 ，上代码（随便写的有点挫哈，后面会完善将点击事件之类的加上）。
//获取游戏容器 （以下全是web端语法）
let cocos2dContainer = document.getElementById("Cocos2dGameContainer");
//新建一个div
let videoComponent = document.createElement("div");
videoComponent.setAttribute("id","videoCpmponent");
//新建一个video控件
let video = document.createElement("video");
//创建一个按钮
let button = document.createElement("button");
button.setAttribute("id","videoButton");
button.style.position = "absolute"
button.style.right = "10px"
button.style.top = "50px"
button.style.width = "128px"
button.style.height = "128px"
button.style.backgroundImage = "url(res/raw-assets/Texture/btn_close.png)"
button.onclick = function(){
//按钮点击事件 移除最外层的div
let cocos2dContainer = document.getElementById("Cocos2dGameContainer");
cocos2dContainer.removeChild(document.getElementById("videoCpmponent"))
}
video.setAttribute("id","video");
video.style.position = "absolute"
video.style.left = "0px"
video.style.top = "0px"
video.style.width = "960px"
video.style.height = "640px"
let source = document.createElement("source");
source.src = "http://benchmark.cocos2d-x.org/cocosvideo.mp4";
video.appendChild(source);
video.autoplay = true;
videoComponent.appendChild(video);
videoComponent.appendChild(button);
cocos2dContainer.appendChild(videoComponent);
WebVideoPlayer.rar (244.1 KB)
下午自己又研究了一下 发现之前的代码有点绕，其实根本不需要自己创建video，用creator提供的就好，精简了一下
if(cc.sys.platform == cc.sys.DESKTOP_BROWSER ||cc.sys.platform == cc.sys.MOBILE_BROWSER ){
let cocos2dContainer = document.getElementById("Cocos2dGameContainer");
//创建一个按钮
let button = document.createElement("button");
button.setAttribute("id","videoButton");
button.style.position = "absolute"
button.style.right = "50px"
button.style.top = "50px"
button.style.width = "51px"
button.style.height = "48px"
button.style.backgroundImage = "url(res/raw-assets/resources/textures/common/dhly_jiantou_up.png)"//返回按钮图片路径
button.onclick = function(){
//这里面写自己的游戏逻辑
}
cocos2dContainer.appendChild(button);
}
直接在videoplayer的控制文件加这些代码就可以了,当然要保证videoplayer先加到cocos2dContainer里再加button，保证button在上面。