如何在点击时添加视频html5“控件”？(jquery)

wnvonmuf 于 2023-04-20 发布在 jQuery

关注(0)|答案(3)|浏览(218)

我试图编码我自己的网站，完全手工制作，但我有一个小问题.我想在我的网站上添加一些HTML5视频与基本的播放器.
为了隐藏控件，并使一些东西干净，我添加了一个快速的js脚本，以便：当用户点击缩略图（视频的海报）时，视频开始。然而，我想添加，当用户点击时，它还添加了视频的控制属性，以便能够在视频中使用全屏或前进。

以下是我的剧本：

jQuery( document ).ready(function($) {
            $('.myHTMLvideo').click(function() {
                this.paused ? this.play() : this.pause();
            });
        });

然后，我希望当“onclick”时，我们在我的中添加属性控件，以便能够播放视频，当我再次单击时，它可能会消失。
我已经尝试过以前的一个脚本，但是当我点击一个视频时，它在同一页面上显示了我所有视频上的控件...
下面是我的html视频div：

<div class="tile video">
 <video preload="auto" class="myHTMLvideo" poster="#">
 <source src="#" type="video/mp4">
 </video> 
</div>

让我知道什么是最好的选择，为你的家伙...并感谢您的帮助，当然！

jquery

来源：https://stackoverflow.com/questions/76053115/how-to-add-video-html5-controls-on-click-jquery

3条答案

按热度按时间

aiqt4smr1#

这就是你如何做到这一点。

jQuery(document).ready(function($) {
  $('.myHTMLvideo').click(function() {
  if (this.paused) {
    this.play();
  $(this).attr('controls', true); // this will add controls attribute
   } else {
     this.pause();
    $(this).removeAttr('controls'); // and this will remove controls attribute
   }
  });
});

要播放视频，请单击并显示控件

jQuery(document).ready(function($) {
  $('.myHTMLvideo').click(function() {
    var video = $(this).find('video')[0];
    if (video && video.paused) {
       video.setAttribute('controls', '');
       video.play();
    } else if (video) {
          video.pause();
     }
   });
});

赞(0）回复(0）举报 2023-04-20

xqkwcwgp2#

脚本中的小修改

jQuery(document).ready(function($) {
          $('.myHTMLvideo').click(function() {
            if (this.paused) {
            
              $(this).attr('controls', ''); 
               this.play();
            } else {
            
              $(this).removeAttr('controls'); 
              this.pause();
            }
          });
        });

jQuery(document).ready(function($) {
          $('.myHTMLvideo').click(function() {
            if (this.paused) {
            
              $(this).attr('controls', ''); 
               this.play();
            } else {
            
              $(this).removeAttr('controls'); 
              this.pause();
            }
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="tile video">
 <video preload="auto" class="myHTMLvideo" style="width:300px;" poster="#">
 <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
 </video> 
</div>
<div class="tile video">
 <video preload="auto" class="myHTMLvideo" style="width:300px;" poster="#">
 <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
 </video> 
</div>

赞(0）回复(0）举报 2023-04-20

p8ekf7hl3#

根据@Suhel Khan的回答，以下是我现在的剧本：

$(document).ready(function() {
     $('.myHTMLvideo').click(function() {
       var video = $(this).find('video')[0]
       console.log(video);
        if (video.paused) {
            video.setAttribute('controls', '');
            video.play();
        } else {
            video.pause();
        }
      });
    });

但我现在有一个错误：* “Cannot read properties of undefined（阅读'paused'）"* 如您所见，变量video为undefined。
我觉得我接近解决我的问题，但可变视频似乎没有给予必要的信息，让控件出现，并开始播放视频在同一时间。

赞(0）回复(0）举报 2023-04-20

我来回答

如何在点击时添加视频html5“控件”？(jquery)

3条答案

相关问题

热门标签

最新问答