Video标签动态修改src地址播放问题
不管在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地址播放问题的更多相关文章
- 视频 embed标签动态改变Src的值,局部刷新播放其他视频的javascript方法
看图: 视频处html代码: <div id="mod_player" class="mod_player"> <embed id=" ...
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
- C#正则表达式提取HTML中IMG标签中的SRC地址
百度到的一个,这里就直接贴了 http://blog.csdn.net/smeller/article/details/7108502#comments 一般来说一个 HTML 文档有很多标签,比如“ ...
- ios video标签部分mp4文件无法播放的问题
问题描述: 部分MP4文件在ios的微信浏览器中无法播放,点击播放后缓冲一下之后显示叉,而另外一些mp4文件正常,同时在安卓全部下正常. 分析: h264编码的压缩级别问题导致. 苹果官方文档中对 i ...
- a标签动态修改手机号跳到拨打界面
<div class="primaryButton"> <a :href.stop="'tel:' + createData.salesPhone&qu ...
- 关于vue中的videoPlayer的src视频地址参数动态修改(网上一堆错误方法,被误导很久,自己找到了正确的方法,供大家借鉴)
方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单.this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用绿色框起来 ...
- h5的video标签
在video标签中,我们可以使用属性:videoWidth & videoHeight,它获取的是video的宽度和高度(媒体本身). 虽然不能直接使用,但是可以通过计算宽高比得到 video ...
- html5 video标签如何禁止视频下载
html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...
- H5 video标签的属性
35-video标签 video标签的属性 src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标 ...
随机推荐
- Vue笔记目录
Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待
- Linux 系统管理 : last 命令详解
原文 last命令用于显示用户最近登录信息.单独执行last命令,它会读取/var/log/wtmp的文件,并把该给文件的内容记录的登入系统的用户名单全部显示出来 语法 last(选项)(参数) 选项 ...
- scratch2.0的教材视频,王木头系列
在线视频 http://v.qq.com/vplus/d05a62f676f6f3b6b87401b4530cff9a?page=cover 理论辩证 https://www.sohu.com/a/1 ...
- php中的Exception
如果定制的EXCEPTION搞定了,默认的,就自然不在话下罗. 直接上最曲折的过程. InvalidIdException.php <?php namespace Bookstore\Excep ...
- 项目Beta冲刺(团队)——05.23(1/7)
项目Beta冲刺(团队)--05.23(1/7) 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:记录Beta敏捷冲刺第1 ...
- wordpress去掉category的另一个方法
今天ytkah的客户问wordpress网站一直去不掉分类url中的/category/,他说已经按ytkah之前的方法设置了还是不起作用,进入网站后台发现,他们的网站有安装yoast,然后就大概知道 ...
- iOS开源库分类
语言库 rx aop kvo 功能库 UI network data-model-map cache 跨平台库 wkjscorebridge jspatch 性能监控库:友盟 部署库:jspathc ...
- IMP本质上是一个通用的函数指针
IMP:通用的函数指针 /// A pointer to the function of a method implementation. #if !OBJC_OLD_DISPATCH_PROTOTY ...
- jasypt-spring-boot
运行 运行时配置解密秘钥-Djasypt.encryptor.password=在idea中运行 命令行启动和docker中运行参见https://www.cnblogs.com/zz0412/p/j ...
- PostgreSQL 执行计划
简介 PostgreSQL是“世界上最先进的开源关系型数据库”.因为出现较晚,所以客户人群基数较MySQL少,但是发展势头很猛,最大优势是完全开源. MySQL是“世界上最流行的开源关系型数据库”.当 ...