不管在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. php curl 转为 x-www-form-urlencoded 方式的坑

    网上转变的方法基本都是写添加下面这句: curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-fo ...

  2. Python 栈、队列的实现

    在python中,列表既可以作为栈使用,又可以作为队列使用. 把列表作为栈使用 栈:后进先出 stack=[1,2,3] stack.append(4) #入栈,以列表尾部为栈顶 print(stac ...

  3. 学校老师没重点讲的C语言

    格式说明由“%”和格式字符组成,如%d%f等.它的作用是将输出的数据转换为指定的格式输出.格式说明总是由“%”字符开始的.不同类型的数据用不同的格式字符. 格式字符有d,o,x,u,c,s,f,e,g ...

  4. VirtualDub在处理WMV文件时显示“MISSING CODEC”怎么办

    以下内容主要来自:http://www.brilliantcode.com/virtualdub-is-showing-missing-codec-when-i-play-a-wmv-movie-ev ...

  5. 关于ping github.com超时的解决办法

    今天在使用git的时候执行将本地分支推送到远程分支的push操作时(同时为远程库创建和本地分支同名的分支),遇到了超时的错误,经过查询全网各位大牛的操作这里给出有效解决方式 进入C:\Windows\ ...

  6. springboot之DevTools热部署的简单原理解析

    IDEA新建springboot选择DevTools springboot-devtools模块能够实现热部署,添加类.添加方法,修改配置文件,修改页面等,都能实现热部署. 原理就是重启项目,但比手动 ...

  7. mysql-xtrabackup备份恢复

    1.xtrabackup的安装 8.0版本-支持mysql8 wget https://www.percona.com/downloads/Percona-XtraBackup-LATEST/Perc ...

  8. laravel 配置路由 api和web定义的路由的区别详解

    1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...

  9. npm install 和 npm ci 的主要区别

    npm install 和 npm ci 的主要区别: 该项目必须有一个 package-lock.json 或 npm-shrinkwrap.json. 如果 package-lock.json 中 ...

  10. vue实现分页组件

    创建pagination.vue /* * 所需参数 * total Number 总页数 * current Number 当前页面下标 * pageSize Number 页面显示条数 * siz ...