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标 ...
随机推荐
- php curl 转为 x-www-form-urlencoded 方式的坑
网上转变的方法基本都是写添加下面这句: curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-fo ...
- Python 栈、队列的实现
在python中,列表既可以作为栈使用,又可以作为队列使用. 把列表作为栈使用 栈:后进先出 stack=[1,2,3] stack.append(4) #入栈,以列表尾部为栈顶 print(stac ...
- 学校老师没重点讲的C语言
格式说明由“%”和格式字符组成,如%d%f等.它的作用是将输出的数据转换为指定的格式输出.格式说明总是由“%”字符开始的.不同类型的数据用不同的格式字符. 格式字符有d,o,x,u,c,s,f,e,g ...
- VirtualDub在处理WMV文件时显示“MISSING CODEC”怎么办
以下内容主要来自:http://www.brilliantcode.com/virtualdub-is-showing-missing-codec-when-i-play-a-wmv-movie-ev ...
- 关于ping github.com超时的解决办法
今天在使用git的时候执行将本地分支推送到远程分支的push操作时(同时为远程库创建和本地分支同名的分支),遇到了超时的错误,经过查询全网各位大牛的操作这里给出有效解决方式 进入C:\Windows\ ...
- springboot之DevTools热部署的简单原理解析
IDEA新建springboot选择DevTools springboot-devtools模块能够实现热部署,添加类.添加方法,修改配置文件,修改页面等,都能实现热部署. 原理就是重启项目,但比手动 ...
- mysql-xtrabackup备份恢复
1.xtrabackup的安装 8.0版本-支持mysql8 wget https://www.percona.com/downloads/Percona-XtraBackup-LATEST/Perc ...
- laravel 配置路由 api和web定义的路由的区别详解
1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...
- npm install 和 npm ci 的主要区别
npm install 和 npm ci 的主要区别: 该项目必须有一个 package-lock.json 或 npm-shrinkwrap.json. 如果 package-lock.json 中 ...
- vue实现分页组件
创建pagination.vue /* * 所需参数 * total Number 总页数 * current Number 当前页面下标 * pageSize Number 页面显示条数 * siz ...