最近面试的时候遇到一个问题,问我移动端怎么让video小窗播放,当时有点懵,放下手机(电话面试,话说好紧张)才反应过来,之前自己就做过这个,用playinline属性就可以搞定(x5-playsinline=”” playsinline=”” webkit-playsinline=””)。具体看代码
<video width="200" height="300" src="1.mp4" controls="" autoplay x5-playsinline="" playsinline="" webkit-playsinline="" poster="" preload="auto"></video>
然后延伸到另一个问题,实现弹幕。大家应该知道移动端video标签在ios和andriod展示是有两个区别:
1.ios会全屏播放而andriod表现不一
2.ios video可以通过z-index设置层级,而在andriod video标签的层级始终是最高的,这就导致了,弹幕无法盖住video
问题2我个人想法是把video逐帧绘制到canvas,但是感觉这样很耗费内存,不死心,查了好多资料也没得到满意的答案,搜到一个video转canvas的插件jsmpeg https://github.com/phoboslab/jsmpeg 这个插件要求视频格式是ts格式的。
看了B站的移动端视频弹幕做的很棒,但是始终不知道他们采取的是什么技术。有知道的大神烦请拍砖告知,小弟不胜感激。