JQuery 视频控制器 - 定位相关视频的问题

编程问答 2022-05-15

问题描述

我正在创建一个页面来显示一些视频。我使用 JQuery 创建了一个视频播放按钮 video-item__button 来切换播放/暂停其各自的视频。我创建了一个变量 $video，其中包含按钮需要定位的视频的位置。

所以我是说 - 如果按钮被点击 - 找到一个带有 .video-item__video 类的同级元素，然后如果暂停 - 播放/如果正在播放 - 暂停。

但是我在控制台中收到以下错误消息：

"video-page-listing.js?ver=5.7:43 Uncaught TypeError: this.siblings is not a function"

有人可以为这个问题提出解决方案吗？

<article class="video-item">
    <div class="video-item__button"></div>
    <video class="video-item__video">
        <source src="myvideo.mp4" type="video/mp4">
    </video>
</article>

<article class="video-item">
    <div class="video-item__button"></div>
    <video class="video-item__video">
        <source src="myvideo-2.mp4" type="video/mp4">
    </video>
</article>

<script>

    $(document).ready(function() {

        // When 'video-item__button' clicked   
        $('.video-item__button').click(function(){

            // Locate sibling 'video-item__video'            
            $video = (this).siblings('.video-item__video'); // doesn't work as Siblings not a function
            
            // If video paused: play
            if ($video.paused) {
                $video.play(); 
            } 
            // If video play: pause
            else {
                $video.pause(); 
            }
                
        });

    });

</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptjqueryvideovideo