不管在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. ES6 之 Symbol

    1. 基本用法 Symbol 是ES6引入的一种新的原始数据类型,表示独一无二的值. 前六种基础数据类型是 undefined null Boolean String Number Object Sy ...

  2. 美团点评CAT监控平台研究

    1. 美团点评CAT监控平台研究 1.1. 前言 此文根据我对官方文档阅读并记录整理所得,中间可能会穿插一些自己的思考和遇坑 1.2. 简介 CAT 是基于 Java 开发的实时应用监控平台,为美团点 ...

  3. 11、多行文本最后一行显示省略号并截取文本字数(vue)

    1.首先通过css实现多行文本显示省略号: { height: 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-li ...

  4. JS案例 - 分页

    1.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. postgresql怎么导入数据库

    1.切换到postgres用户 : sudo su - postgres 2.在shell命令行下,创建数据库exampledb,并指定所有者为dbuser : sudo -u postgres  - ...

  6. day 28

    目录 操作系统发展史 穿孔卡片 联机批处理系统 脱机批处理系统 多道技术(基于单核情况下研究) 单道 多道技术 并发与并行 进程 程序与进程 进程调度 先来先服务调度 短作业优先调度 时间片轮转法 分 ...

  7. flask ajax发送请求返回400

    在flaskWTF使用csrf保护后,一般提交form表单都需要一个隐藏的csrf 这样可以成功提交,但是使用ajax提交时就不能成功提交,会返回400错误,服务器无法理解请求,这样就需要新的方法解决 ...

  8. python语言的堆栈与队列类的实现

    基于python语言的数据结构之堆栈与队列的实现 # 堆栈的实现 # -*- coding: utf-8 -*- """ 栈(stack), 是一种容器,可以存入数据元素 ...

  9. 【Nginx】使用certbot安装免费https证书使Nginx支持Https请求

    certbot官网:https://certbot.eff.org/lets-encrypt/centosrhel7-nginx 一.安装步骤 1)安装certbot,执行  sudo yum ins ...

  10. 熟练掌握GitHub及Git的使用方法

    一.Git 命令的理解和使用 Git是一个快速,可扩展的分布式版本控制系统,具有异常丰富的命令集,可提供高级操作和对内部的完全访问. 分布式:Git版本控制系统是一个分布式的系统,是用来保存工程源代码 ...