如何解决Vue JS - 使用 v-for 播放/暂停的视频处理
我使用请求接受视频链接,然后使用 v-for 我显示它们问题是播放按钮仅适用于一个视频,而不适用于所有视频,我希望播放适用于每个视频也暂停这里是我的代码
<video
width="206"
height="126"
:src="c.video"
@playing="updatePaused"
@pause="updatePaused"
@canplay="updatePaused"
></video>
<span v-show="paused" @click="play" class="play_btn1"
><i class="uil uil-play"></i
></span>
<span
v-show="playing"
@click="pause"
class="play_btn1"
><i class="uil uil-pause"></i
></span>
脚本
<script>
export default {
computed: {
playing() {
return !this.paused;
},},methods: {
updatePaused(e) {
this.videoElement = e.target;
this.paused = e.target.paused;
},play() {
this.videoElement.play();
},pause() {
this.videoElement.pause();
},data() {
return {
videoElement: null,}
},};
</script>
解决方法
您可以使用 ref 访问 HTML 元素。只需将 ref 与循环内的任何名称绑定,您就可以使用 this.$refs[<name>]
访问该元素。
现在因为 ref 在一个循环中,所以你必须使用 this.$refs[<name>][<loopIndex>]
来访问它。
在此处了解有关参考的更多信息:https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements
new Vue({
el: "#app",data() {
return {
videosState: {},videos: [
{
id: 1,url:
"https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
},{
id: 2,url:
"https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_10mb.mp4"
}
]
};
},methods: {
changeVideoState(idx) {
// Create initial state for the video if it
// it doesn't exist
if (!this.videosState[idx]) {
/**
When you add a new field to
an object that doesn't exist
yet(in the object),vue doesn't
know about the changes. So `this.$set`
notifies vue about the change
so that vue can update the
dom correctly.
*/
this.$set(this.videosState,idx,{
play: false
})
}
const isPlaying = this.videosState[idx].play;
const video = this.$refs.video[idx];
if (!isPlaying) {
video.play();
} else {
video.pause();
}
this.videosState[idx].play = !isPlaying
}
}
});
<div id="app">
<div
v-for="(video,idx) in videos"
:key="video.id"
style="
display: inline-flex;
flex-direction: column;
margin-bottom: 1rem;
"
>
<video ref="video" :src="video.url" width="400"></video>
<button @click="changeVideoState(idx)">
{{ videosState[idx] && videosState[idx].play ? "Pause" : "Play" }}
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
注意:如果您想在加载/创建组件时访问 refs,您必须在 mounted
生命周期中执行此操作:
new Vue({
mounted() {
// Access refs here
}
})
Refs 仅在组件完全渲染后可用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。