不管在React或Vue中，将一个变量赋值给src属性，当修改这个变量的值时，video播放的还是原来的视频。

Vue中

<video id="root">

  <source :src="videoUrl" />

</video>

React中

<video id="root">

  <source src={videoUrl} />

</video>

动态修改videoUrl的值时，播放的视频，是不会跟着地址动态切换的，我们需要让video重新加载新的源(地址)，将新的地址，赋值给video的src属性，然后执行play()方法即可

let player = document.querySelector('#root') 
player.src = "新的地址" 
player.play()

Video标签动态修改src地址播放问题的更多相关文章

  1. 视频 embed标签动态改变Src的值，局部刷新播放其他视频的javascript方法

    看图: 视频处html代码: <div id="mod_player" class="mod_player"> <embed id=" ...

  2. HTML5 audio与video标签实现视频播放，音频播放

    随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...

  3. C#正则表达式提取HTML中IMG标签中的SRC地址

    百度到的一个,这里就直接贴了 http://blog.csdn.net/smeller/article/details/7108502#comments 一般来说一个 HTML 文档有很多标签,比如“ ...

  4. ios video标签部分mp4文件无法播放的问题

    问题描述: 部分MP4文件在ios的微信浏览器中无法播放,点击播放后缓冲一下之后显示叉,而另外一些mp4文件正常,同时在安卓全部下正常. 分析: h264编码的压缩级别问题导致. 苹果官方文档中对 i ...

  5. a标签动态修改手机号跳到拨打界面

    <div class="primaryButton"> <a :href.stop="'tel:' + createData.salesPhone&qu ...

  6. 关于vue中的videoPlayer的src视频地址参数动态修改（网上一堆错误方法，被误导很久，自己找到了正确的方法，供大家借鉴）

    方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单.this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用绿色框起来 ...

  7. h5的video标签

    在video标签中,我们可以使用属性:videoWidth & videoHeight,它获取的是video的宽度和高度(媒体本身). 虽然不能直接使用,但是可以通过计算宽高比得到 video ...

  8. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

  9. H5 video标签的属性

    35-video标签 video标签的属性 src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标 ...

随机推荐

  1. 关于升级.NetCore3.1启动运行项目之后无法运行之前版本的错误解决方案

    昨天在跟上微软的进度,更新VS版本升级.netcore3.1 之后成功运行之后发现,我无法运行之前版本的问题 都是报这种问题: 还有打开解决方案所有的项目都无法正常加载,都是"已卸载&quo ...

  2. C#8.0——异步流（AsyncStream）

    异步流(AsyncStream) 原文地址:https://github.com/dotnet/roslyn/blob/master/docs/features/async-streams.md 注意 ...

  3. Mac OS 查看端口和杀死进程

    查看sudo lsof -i:port (端口号) sudo lsof -i:9501 COMMAND PID USER FD TYPE DEVICESIZE/OFF NODE NAME php 77 ...

  4. php迭代器模式(iterator pattern)

    ... <?php /* The iterator pattern is used to traverse a container and access its elements. In oth ...

  5. loadrunner中web_submit_data与web_submit_form区别

    以loadrunner自带的订票系统为例 当选择红框选中的模式时,所录脚本如下:回放时可以正常回放,登录成功 选另一种所录脚本如下:回放时登录不成功,session失效, 其中web_submit_f ...

  6. 201671010404+陈润菊 实验十四 团队项目评审课程&学习总结

    个人学习总结博客 这个作业属于哪个课程 软件工程任教教师 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/11093584.html 作业学习目标 (1 ...

  7. VC检测内存泄漏（Detected memory leaks!）

    Detected memory leaks!Dumping objects ->{98500} normal block at 0x05785AD0, 152 bytes long.Data: ...

  8. Beta冲刺(3/7)——2019.5.24

    所属课程 软件工程1916|W(福州大学) 作业要求 Beta冲刺(3/7)--2019.5.24 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪万里 ...

  9. Spring Cloud 之 Consul 知识点：服务注册与发现（类似工具：Eureka、ZooKeeper、Etcd）

    资料 网址 springcloud(十三):注册中心 Consul 使用详解 http://ityouknow.com/springcloud/2018/07/20/spring-cloud-cons ...

  10. Bootstrap 学习笔记1

    <img src="..." class="img-responsive" alt="响应式图像"> 通过添加 img-resp ...