不管在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. js对数组array的常见操作小结

    1.创建数组?两种方式 var arr = new Array("1","2","4"); var arr1 = ["1" ...

  2. ip协议栈

    struct iphdr { #if defined(__LITTLE_ENDIAN_BITFIELD) __u8 ihl:4, version:4; #elif defined (__BIG_END ...

  3. top - 交互式监控

    top - display Linux processes 显示linux进程 格式: top -hv|-bcHiOSs -d secs -n max -u|U user -p pid -o fld ...

  4. MTU是什么？

    MTU是Maximum Transmission Unit的缩写. 意思是网络上传送的最大数据包. MTU的单位是字节. 大部分网络设备的MTU都是1500.如果本机的MTU比网关的MTU大,大的数据 ...

  5. mysql的binlog空间维护

    .Binlog空间维护 一,显示当前的logs文件记录 show master logs; 二,清空n天前的日志,减少磁盘空间 PURGE MASTER LOGS BEFORE DATE_SUB(CU ...

  6. Shell 日常 ip 端口可用性测试

    ip port 可用测试 telnet 测试某个ip 端口是否可用很方便,但是如果ip比较多,写脚本就不方便了因为是阻塞的 这里强烈推荐 nc nc -z -w 1 127.0.0.1 8990 这里 ...

  7. wp_list_categories如何去掉前面的categories

    我们可以通过<?php wp_list_categories(); ?>来调用所有分类,但是在前面会出现一个categories,对强迫症患者来说就是钉子,那就把它去掉吧,顺便让自己更熟悉 ...

  8. react-native 在iOS上使用http链接的图片地址不显示| iOS9 & iOS10 HTTP 不能正常使用的解决办法

    https://segmentfault.com/a/1190000002933776 今天升级Xcode 7.0 bata发现网络访问失败.输出错误信息 The resource could not ...

  9. Codechef July Challenge 2019 Hit the Coconuts

    假设现在有一堆数,我想要保证能取出一个,至少需要敲 (数的个数)*(这些数里的最小值)那么把这些数从大到小排序,$dp[i][j]$ 表示前 $i$ 个里面保证能取出 $j$ 个需要敲的次数.$dp[ ...

  10. OKR失败的五个关键因素

    OKR是近年来的一个热点话题,这种目标管理法在谷歌体现了它非凡的价值,也因此被Facebook.Linkedin等公司所引用.从实践成功的案例看来,OKR确实是一种可以明确公司目标.促进公司发展的有价 ...