video标签上传视频后无法在移动端正常显示预览图

  • cindy Liu
  • 4 Minutes
  • February 1, 2018

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

PC端如下图:

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

原代码如下
1
2
3
4
5
<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属性来设置在当前的视频上,且将工具条隐藏起来。

代码如下
1
2
3
4
5
<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代码就行
1
2
3
4
5
6
7
8
9
10
11
<script>
var video1 = document.getElementById("video");

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

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