本文共 1220 字，大约阅读时间需要 4 分钟。

最近接触到移动端播放视频，着实是头疼了比较长的时间。特此来记录一波，怀念下当初（非常难忘）的日子

首先先提醒小伙伴，h5其实是有自己的video播放的(这是最常规的用法)：

关于video的参数可以戳这了解下：

（这个视频源也是找的别人的，但是忘了地址了，在此多谢）

这个就是controls默认的效果，正常来说是可以满足大多数需求（如果不是自定义控制播放、暂停，一定要加上controls,不然只会显示一张图片）。对了，如果只想留下默认的一部分控件，暂时就只能所有的控件都要自己去调API了（具体API可以参考上面的链接），controls目前是不可以让我们选择性的使用。

上面的截图也是我心里暗喜，这么简单就能实现。然而“现实”总是如此“多娇”

>>>>>>>>>>>>>>>>>>>>>难   忘   线>>>>>>>>>>>>>>>>>>>>>

在微信和qq中播放：

第一个问题：腾讯对非腾讯旗下的视频来源均强制全屏，结果就是视频画质模糊，长宽比例失调（截图太大，就不放了，有兴趣可以试试）

第二个问题：播放完成后，是一个腾讯视频新闻的列表页（对于想展示自家东西的小伙伴，是一件很~~de事，对于用户来说，体验也是很醉人）

所以产品大哥不乐意了（在这致敬所有的产品大哥）：你能不能让它在当前页面播放，全屏画面都糊了，用户怎么看~~

然后就开始了各种找法子的艰辛历程……

<video preload='auto' id='my-video'  

    src='https://www.seastart.tv/introduce.mp4'  

    webkit-playsinline='true'                            /*这个属性是ios 10中设置可以,让视频在小窗内播放，也就是不是全屏播放*/

    playsinline='true'                                        /*ios微信浏览器支持小窗播放*/

    'x-webkit-airplay='allow'    

    x5-video-player-type='h5'                          /*启用同城播放器*/

    x5-video-player-fullscreen='true'               /*全屏设置，设置为true是防止全屏*/

    x5-video-ignore-metadata='true'

    width='100%' height='100%' controls><p> 不支持video</p> </video>

这样设置完了，其实和别的第三方平台还是有差异的，就是不能在当前页播放，还是会在另一个页面居中播放，但是相比之前的全屏以及广告，产品已经打算放过楼主了。

对了，提一句，看到网上说有用canvas做播放的，楼主试了下，对于页面只有一个视频而言，还是可以试试。但是有多个视频的页面以及有滚动的页面，就很尴尬了，毕竟canvas做出来的页面时不能动的，会很尴尬~

好了，就先记录到这里，以后自己来看应该还会怀念吧……哈哈哈 $_$  $_$