vue中的video
来源:互联网 发布:上帝在掷骰子吗 知乎 编辑:程序博客网 时间:2024/06/10 01:17
获取当前播放时间:$('video').currentTime
ended 属性返回音频/视频是否已结束。
myVid.ended
返回true/falsepaused 属性返回音频/视频是否已暂停。
play() 方法开始播放当前的音频或视频。
pause() 方法停止(暂停)当前播放的音频或视频。
timeupdate当目前的播放位置已更改时ended当目前的播放列表已结束时error当在音频/视频加载期间发生错误时pause当音频/视频已暂停时play当音频/视频已开始或不再暂停时duration返回当前音频/视频的长度(以秒计)
vue
<audio ref="audio" :src="currentSong.url" @play="ready" @error="error" @timeupdate="updateTime"
@ended="end"></audio>
<div class="progress-wrapper">
<span class="time time-l">{{format(currentTime)}}</span>
<div class="progress-bar-wrapper">
<progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar>
</div>
<span class="time time-r">{{format(currentSong.duration)}}</span>
</div>
methods: {
ready() {
this.songReady = true
this.savePlayHistory(this.currentSong)
},
error() {
this.songReady = true
},
updateTime(e) {
this.currentTime = e.target.currentTime
},
format(interval) {
interval = interval | 0
const minute = interval / 60 | 0
const second = this._pad(interval % 60)
return `${minute}:${second}`
},
_pad(num, n = 2) {
let len = num.toString().length
while (len < n) {
num = '0' + num
len++
}
return num
},
}
如何绑定事件
对照着看,js使用onclick注册事件,angularJS使用ng-click指令注册事件。
step1,使用类似的v-on:click指令
它的特点,首先是“一次绑一个”,这种内联的方式只能一次绑定一个方法,要绑定多个方法,还得使用原生的javascript的原生方法addEventListener方法。然后,指令的限定表达式除了是一个方法名还可以是js语句。第三,它有缩写,"@click"。
step2,methods配置
对应的方法需要在Vue实例中的methods属性中进行定义。
step3:使用特殊变量$event访问原生DOM事件(optional,补充了解)
HTML5 Audio/Video 属性
HTML5 Audio/Video 事件
- vue中的video
- h5+vue video使用
- 使用 vue 构建 video 组件
- 基于vue-video-player自定义播放器
- 网页中的video
- HTML5中的video&audio
- QGC中的Video设置
- HTML5 中的video标签介绍
- html5中的video再学习
- 微信浏览器中的video
- 关于H5中的<video></video>标签的用法总结
- vue中的指令
- vue中的渐进过渡
- vue中的初始排序
- Vue开发中的常见问题
- Vue开发中的常见问题
- Vue组件中的slot
- vue中的生命周期
- CF734E:Anton and Tree(缩点 & 直径)
- LeetCode500. Keyboard Row
- 轻松将电气数据集成到您的机械设计
- CodeForces
- a.length==0、a==null、a == ""、a.equals("") 的区别
- vue中的video
- 【引用】web性能测试基本知识
- leetcode-26&80 Remove Duplicates from Sorted Array I & II
- hdu 6058 链表 枚举
- 我们是如何在一个月内干掉腾讯阅读的
- The 9 Deep Learning Papers You Need To Know About
- 2.vue的入门基础
- 机器学习精简教程之四——用matplotlib绘制精美的图表
- js中的值传递