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标 ...
随机推荐
- xcode11新项目删除main.storyboard 两种方法
方法一 心急的童鞋按照老操作完成后再按照如下操作即可 /** 弃用storboard 1.info.plist去除 <key>UIApplicationSceneManifest</ ...
- spring 请求参数和路径变量
请求参数和路径变量:客户端传递参数给服务端的两种方式 请求参数可以发送值传递给服务器,请求参数采用key=value的形式并使用“&”符号进行参数间的分隔,例如: http://localho ...
- vue.js 实现粒子特效之插件( vue-particles )
首先先一张效果图 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 使用教程: npm install vue-particles --s ...
- ip黑名单-做过ssh扫描黑的ip
# # hosts.deny This file contains access rules which are used to # deny connections to network servi ...
- 模块加载——modprobe和insmod的区别(转)
转载地址:https://blog.csdn.net/qianyizhou17/article/details/44135133 linux设备驱动有两种加载方式insmod和modprobe,下面谈 ...
- rest framework 之解析器
一.示例 1.api/urls.py from django.urls import path, re_path from api.views import UserView, ParserView ...
- SAMBA 服务配置
Samba文件共享服务 Linux系统中一种文件共享程序 在Windows网络环境中,主机之间进行文件和打印机共享是通过微软公司自己的SMB/CIFS网络协议实现的.SMB(Server Messag ...
- JAVA线程池的创建与使用
为什么要用线程池? 我们都知道,每一次创建一个线程,JVM后面的工作包括:为线程建立虚拟机栈.本地方法栈.程序计数器的内存空间(下图可看出),所以线程过多容易导致内存空间溢出.同时,当频繁的创建和销毁 ...
- jenkins部署java项目(五)
一.web server安装jdk+tomcat其中jdk可以为openjdk,版本1.8 1.1 安装jdk环境 方式一:直接使用yum安装openjdk # * 方式二:本地安装在oracle官网 ...
- php的类使用样例
这个demo.差不多php的类的主要知识点都用到了. public,private关键字, namespace,use命令空间, require导入, interface复用, abstract抽象类 ...