video标签上传视频后无法在移动端正常显示预览图cindy Liu4 MinutesFebruary 1, 2018

本人前端菜鸟，这是第一篇文章。在实习当中第二个项目遇到这样一个问题。使用了layui框架的上传视频组件上传视频后，在pc端浏览视频时可以正常显示但在移动端的话则会出现异常。

PC端如下图：

但在移动端的话则会出现异常，无法正常显示预览图，用途体验很差，如下图：

原代码如下

<div>
    <video id="video" class="videoContent" x-webkit-airplay="true" webkit-playsinline="true" height="200px" width="200px" controls>
        <source src="img/QQ视频20180228105653.mp4" type="video/mp4" />
    </video>
</div>

我想要得到的理想效果是上传多个视频后，可以分别显示视频的预览图。后来查阅了很多资料，有很多类似的问题，解决办法也很多：
一种思路是截取视频的第一作为视频的浏览图
1、可以交给后台使用FFmpeg来实现。 但是由于我需要的效果是选择视频后还未上传就能立刻预读，因此交给后台此方法行不通。
2、也有使用H5来截取第一帧来实现的，但在移动端上依然存在问题。
（参考https://segmentfault.com/q/1010000004625752）
因此我想要的效果依然没法实现，

最后想到了一个野方法，投机取巧。准备了一张视频黑屏的默认图片如下：

并利用poster属性来设置在当前的视频上，且将工具条隐藏起来。

代码如下

<div>
    <video id="video" class="videoContent" poster="img/video.png" x-webkit-airplay="true" webkit-playsinline="true" width="200px">
        <source src="img/QQ视频20180228105653.mp4" type="video/mp4" />
    </video>
</div>

而我希望点击图片就立刻播放，加上以下js代码就行

<script>
    var video1 = document.getElementById("video");

    video1.onclick = function() {
        if(video1.paused) {
            video1.play();
        } else {
            video1.pause();
        }
    }
</script>

最理想化的效果依然没有达到，但是算是还算符合用户需求，点击黑屏图片后可以播放视频，播放视频后会显示当前暂停的预览图。如果各位大佬有方法可以解决视频在移动端预览的异常问题，希望能告诉我~