在日常使用Vue视频过程中,我们会遇到需要快进的情况,以下是一些可以用来实现快进的方法。
<script>
export default {
data() {
return {
currentTime: 0,duration: 0,video: null,isDragging: false
};
},methods: {
onTimeUpdate() {
if (!this.isDragging) {
this.currentTime = this.video.currentTime;
}
},onDurationChange() {
this.duration = this.video.duration;
},onProgressClick(e) {
const percent = e.offsetX / e.currentTarget.offsetWidth;
this.currentTime = this.duration * percent;
this.video.currentTime = this.currentTime;
},onProgressMouseDown() {
this.isDragging = true;
},onProgressMouseUp(e) {
this.isDragging = false;
this.onProgressClick(e);
}
},mounted() {
this.video = this.$refs.video;
this.video.addEventListener("timeupdate",this.onTimeUpdate);
this.video.addEventListener("loadedmetadata",this.onDurationChange);
},destroyed() {
this.video.removeEventListener("timeupdate",this.onTimeUpdate);
this.video.removeEventListener("loadedmetadata",this.onDurationChange);
}
};
</script>
一种方法是使用VueJs,可以直接通过监听时间更新事件和元数据加载事件,更新时钟和视频的总持续时间。有一个进度条,可以通过监听进度条的MouseDown和MouseUp事件来调整进度。以下是基于VueJs的实现方法的代码:
首先,我们会创建一个计时器和一个Vue的Data对象,它将包含我们需要跟踪的数据属性。我们还将创建一个视频元素的引用,以便在挂载时访问和绑定事件侦听器。
<div class="player">
<video ref="video" controls></video>
<div class="controls">
<div class="progress" @click="onProgressClick" @mousedown="onProgressMouseDown" @mouseup="onProgressMouseUp">
<div class="progress-bar" :style="{ width: (currentTime / duration * 100) + '%' }"></div>
</div>
</div>
</div>
下一步,我们将在模板中为视频和进度条元素创建基本的HTML。我们可以添加控件,例如进度条,将其绑定为事件监听器的表单元素。
现在,我们来实现时间和元数据更新侦听器和事件处理函数的方法。当元数据加载时,我们更新VideoDuration的值,并在VideoTimeUpdate事件上更新VideoTime(当前时间)。
在事件处理函数中,我们计算百分比并将其转换为当前视频的时间,然后设置视频的当前时间。 我们也创造了Draggable的方法,它是更简单的Draggable方法,直接由省略DRAGGABLE.js文件变量的代码编写的。到目前为止,我们已经完成了Vue本身的代码实现。
最后,让我们来看看它在页面上是如何运行的。视频播放器非常完善和快速,因为我们直接使用了Vue。您可以自由扩展和编写JavaScript代码,这在React类组件中是不可能的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。