前端| js动态修改video标签视频不刷新的问题

最新推荐文章于 2024-03-24 10:00:00 发布

KevinBrain

最新推荐文章于 2024-03-24 10:00:00 发布

阅读量4.5k

点赞数 3

分类专栏：疑难杂症特效处方文章标签： javascript jquery html5 html css

本文链接：https://blog.youkuaiyun.com/Cobbyer/article/details/106631264

版权

疑难杂症特效处方专栏收录该内容

15 篇文章

订阅专栏

问题描述：在网页上用<video>标签放一个视频播放器，点击视频目录来自动播放不同的视频。通过js动态生成li，点击li之后更改<video>标签<source>中的src，。代码中的src确实有变化，但是网页中的视频并没有加载新的视频。

前端代码如下：

<video id="video_player" style="margin: 5px 5%" width="90%" height="400" align="center" controls>
     source id="video_source" src="/getVideo?id=1" type="video/mp4">
     您的浏览器不支持 HTML5 video 标签。
</video>

    ref_li_click: function (e) {
        var video_id = $(e).attr("video_id");
        ref_video_list.changeVideoPath(video_id);
    },
    changeVideoPath: function (id) {
        $("#video_source").attr("src", "/getVideo?id="+id);
    }

代码中通过指定视频id从后台获取视频流，然后动态更新视频源，视频源能够成功更改，单独打开接口也能读取视频，但就是video标签不刷新视频。

解决方案：要改video元素的src属性，不是改source元素!

    ref_li_click: function (e) {
        var video_id = $(e).attr("video_id");
        ref_video_list.changeVideoPath(video_id);
    },
    changeVideoPath: function (id) {
        $("#video_player").attr("src", "/getVideo?id="+id);
    }