让前端飞程序员前端开发笔记

【H5】iOS系统下的video视频播放完后重新刷新视频

2019-02-01  本文已影响1人  废柴码农

业务需求是H5页面中嵌套video视频,自定义控制视频暂停或者播放,但是对于ios系统下手机,会出现两个问题导致自定义播放事件失效:
1.ios系统下视频自动回放全屏幕播放
2.播放完之后定义在最后一帧图片上

最终目的是video播放完之后实现刚加载出页面时候的效果(即第一张图片效果)
[加载完页面时候的样式]
播放完之后视频

重新刷新视频即使重新刷新video标签的src,所以代码如下:

        videoplay.addEventListener('ended', function (e) {
       // 播放结束时触发的时候使播放图标显示,同时播放完之后重新加载video的src
           videoPalse.style.display = "block";   //播放图标显示
           videoplay.src=require("./../../assets/laterImg/westlake.mp4");  //不是react框架写的直接写路径就可以
           })
注意:我的内容是使用react写的,所以图片用到了require语法,如果不是react直接用路径就可以
上一篇下一篇

猜你喜欢

热点阅读