audio h5 src 变了之后_【H5】iOS系统下的video视频播放完后重新刷新视频

最新推荐文章于 2023-04-10 14:57:39 发布

weixin_39569389

最新推荐文章于 2023-04-10 14:57:39 发布

阅读量258

点赞数

文章标签： audio h5 src 变了之后

本文链接：https://blog.csdn.net/weixin_39569389/article/details/112293150

版权

在H5页面中，针对iOS系统，video视频播放时遇到自动全屏播放和播放结束后停留在最后一帧的问题。为实现播放结束回到初始图片效果，需要在视频播放完成后刷新video标签的src。在React环境中，使用require语法处理资源路径。

摘要由CSDN通过智能技术生成

业务需求是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直接用路径就可以