不管在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. requestAnimationFrame ---- 请求动画帧。

    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画.该方法需要传入一个回调函数作为参数,该回调函数会 ...

  2. ES6的新特性

    ECMAScript 6(简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,又称ECMAScript 2015.ES6就是ES2015. 虽然目前并不是所有 ...

  3. Android图像滤镜框架GPUImage从配置到应用

    GPUImage简介 GPUImage 是iOS下一个开源的基于GPU的图像处理库,提供各种各样的图像处理滤镜,并且支持照相机和摄像机的实时滤镜.GPUImage for Android是它在Andr ...

  4. HttpURLConnection Get和Post发送数据

    Get URL url = new URL(path); HttpURLConnection connection = (HttpURLConnection) url.openConnection() ...

  5. 13 ARM指令集与Thumb指令集

    指令格式 ARM基本格式 <opcode>{<cond>}{S}{.W|.N}<Rd>,<Rn>{,<operand2>} opecode: ...

  6. Kafka Streams开发入门(2)

    背景 上一篇我们介绍了Kafka Streams中的消息转换操作map,今天我们给出另一个经典的转换操作filter的用法.依然是结合一个具体的实例展开介绍. 演示功能说明 本篇演示filter用法, ...

  7. 在 Vim 中，删除 ^@ 符号的几种方法

    在 Vim 中,^@ 表示 ASCII 码中的 NULL 字符,编码为 0x00,占用一个字节. 删除方法 方法1,采用 <CTRL-V><CTRL-J> 或 <CTRL ...

  8. Nmon监控性能分析

    一.CPU信息 1.折线图中蓝线为cpu占有率变化情况:粉线为磁盘IO的变化情况: 2.下面表各种左边的位磁盘的总体数据,包括如下几个: Avg tps during an interval 每个间隔 ...

  9. ubuntu16安装php开发环境

    一,安装 ubuntu 工具 sudo apt install -y git curl zsh vim 二,安装php 和 php-fpm , redis ,memcached 等 sudo apt ...

  10. sudo的使用

    1. sudo:临时提权(提升权限)的工具通常,实际操作中,采用sudo的管理方式,临时的允许某个用户操作某些指令时,拥有root权限. 2. 使用方法: 配置sudo,决定,哪些用户,可以使用roo ...