HTML5 Video标签动态加载地址无法播放

2021-12-27 乐帮网

javascript html

当我们试图改变video标签中的播放地址时，会发现它还是以前的视频地址，而不是最新的址，
不管在React或Vue中，将一个变量赋值给src属性，当修改这个变量的值时，video播放的还是原来的视频。在前端页面我们一般会这么写：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>乐帮网(lebang2020.cn)</title> 
</head>
<body>

<video width="500" height="450" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

</body>
</html>

当我们动态修改src标签时，发现播放器还是播放的原视频，根本无法播放新地址的视频。或者我们使用了MVVM框架

Vue 中

<video id="root">
  <source :src="videoUrl" />
</video>

React中

<video id="root">
  <source src={videoUrl} />
</video>

解决办法如下：
我们修改video标签上的 src属性，而不要修改source下的src。要像如下这样绑定

<video id="root" :src="videoUrl" >
</video>

<video id="root" src={videoUrl} >
</video>

或者我们使用JS来直接修改

let player = document.querySelector('#root') ;
player.src = "new url " ;
player.play();

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力

HTML5 Video标签 动态加载地址无法播放

HTML5 Video标签动态加载地址无法播放