关于微信浏览器video标签获取第一帧和总时长的问题
最近项目中需要上传视频并限制播放时长。还要展示第一帧画面
技术实现。通过Input file 获取上传的视频资源,读取之后转成blob,放到video标签上。然后获取第一帧和视频时长。
问题来了
在pc开发的时候。video标签可以自动获取到第一帧。然后video onloadeddata的方法。可以获取时间。
但是在微信端因为视频是不能自动播放的。也就是不能出发onloadeddata方法。获取不到第一帧。并且微信浏览器video标签,获取不到第一帧图像。
解决方案
项目是vue。这里只介绍方法。不介绍样式。样式大家自己根据ui稿。
<video
ref="video"
src
alt
class="img_video"
muted="true" //静音 某些文章说设置muted然后设置autoplay可以自动播放,然后并没有什么用。出于玄学。没有删除
id="video"
x5-playsinline="true" //微信自动播放会全屏播放,设置此属性 可以小窗口播放
playsinline="true"
webkit-playsinline
autoplay
controls
preload="preload"
></video>
<input
class="file_video"
type="file"
accept="video/*"
ref="file_video"
id="file_video"
@change="addVideo"
/>
methods:{
getObjectURL....
addVideo...
}
getObjectURL(file) {
//转换成blob对象 不要问。
var url = null;
if (window.createObjectURL != undefined) {