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标 ...
随机推荐
- ES6 之 Symbol
1. 基本用法 Symbol 是ES6引入的一种新的原始数据类型,表示独一无二的值. 前六种基础数据类型是 undefined null Boolean String Number Object Sy ...
- 美团点评CAT监控平台研究
1. 美团点评CAT监控平台研究 1.1. 前言 此文根据我对官方文档阅读并记录整理所得,中间可能会穿插一些自己的思考和遇坑 1.2. 简介 CAT 是基于 Java 开发的实时应用监控平台,为美团点 ...
- 11、多行文本最后一行显示省略号并截取文本字数(vue)
1.首先通过css实现多行文本显示省略号: { height: 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-li ...
- JS案例 - 分页
1.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- postgresql怎么导入数据库
1.切换到postgres用户 : sudo su - postgres 2.在shell命令行下,创建数据库exampledb,并指定所有者为dbuser : sudo -u postgres - ...
- day 28
目录 操作系统发展史 穿孔卡片 联机批处理系统 脱机批处理系统 多道技术(基于单核情况下研究) 单道 多道技术 并发与并行 进程 程序与进程 进程调度 先来先服务调度 短作业优先调度 时间片轮转法 分 ...
- flask ajax发送请求返回400
在flaskWTF使用csrf保护后,一般提交form表单都需要一个隐藏的csrf 这样可以成功提交,但是使用ajax提交时就不能成功提交,会返回400错误,服务器无法理解请求,这样就需要新的方法解决 ...
- python语言的堆栈与队列类的实现
基于python语言的数据结构之堆栈与队列的实现 # 堆栈的实现 # -*- coding: utf-8 -*- """ 栈(stack), 是一种容器,可以存入数据元素 ...
- 【Nginx】使用certbot安装免费https证书使Nginx支持Https请求
certbot官网:https://certbot.eff.org/lets-encrypt/centosrhel7-nginx 一.安装步骤 1)安装certbot,执行 sudo yum ins ...
- 熟练掌握GitHub及Git的使用方法
一.Git 命令的理解和使用 Git是一个快速,可扩展的分布式版本控制系统,具有异常丰富的命令集,可提供高级操作和对内部的完全访问. 分布式:Git版本控制系统是一个分布式的系统,是用来保存工程源代码 ...