不管在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. Vue笔记目录

    Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待

  2. Linux 系统管理 : last 命令详解

    原文 last命令用于显示用户最近登录信息.单独执行last命令,它会读取/var/log/wtmp的文件,并把该给文件的内容记录的登入系统的用户名单全部显示出来 语法 last(选项)(参数) 选项 ...

  3. scratch2.0的教材视频,王木头系列

    在线视频 http://v.qq.com/vplus/d05a62f676f6f3b6b87401b4530cff9a?page=cover 理论辩证 https://www.sohu.com/a/1 ...

  4. php中的Exception

    如果定制的EXCEPTION搞定了,默认的,就自然不在话下罗. 直接上最曲折的过程. InvalidIdException.php <?php namespace Bookstore\Excep ...

  5. 项目Beta冲刺(团队)——05.23(1/7)

    项目Beta冲刺(团队)--05.23(1/7) 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:记录Beta敏捷冲刺第1 ...

  6. wordpress去掉category的另一个方法

    今天ytkah的客户问wordpress网站一直去不掉分类url中的/category/,他说已经按ytkah之前的方法设置了还是不起作用,进入网站后台发现,他们的网站有安装yoast,然后就大概知道 ...

  7. iOS开源库分类

    语言库 rx aop kvo 功能库 UI network data-model-map cache 跨平台库 wkjscorebridge jspatch 性能监控库:友盟 部署库:jspathc ...

  8. IMP本质上是一个通用的函数指针

    IMP:通用的函数指针 /// A pointer to the function of a method implementation. #if !OBJC_OLD_DISPATCH_PROTOTY ...

  9. jasypt-spring-boot

    运行 运行时配置解密秘钥-Djasypt.encryptor.password=在idea中运行 命令行启动和docker中运行参见https://www.cnblogs.com/zz0412/p/j ...

  10. PostgreSQL 执行计划

    简介 PostgreSQL是“世界上最先进的开源关系型数据库”.因为出现较晚,所以客户人群基数较MySQL少,但是发展势头很猛,最大优势是完全开源. MySQL是“世界上最流行的开源关系型数据库”.当 ...