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

Question

我正在尝试编写自己的网站代码，完全手工制作，但我有一个小问题。我想在我的网站上添加一些带有基本播放器的 html5 视频。

为了隐藏控件并使内容更干净，我添加了一个快速的 js 脚本：当用户单击缩略图（视频的海报）时，视频开始播放。但是，我想补充一点，当用户点击时，它还会添加相关视频的控件属性，以便能够使用全屏或在视频中前进。

所以，这是我现在的脚本：

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

然后，我希望当“onclick”时，我们在 my 中添加属性控件以便能够播放视频，当我再次单击时，它可能会消失。

我已经尝试过以前的脚本，但是当我点击一个视频时，它会在同一页面上显示我所有视频的控件...

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

Answer 1

这就是你可以做到的。

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
   }
  });
});

Answer 2

脚本中的小修改

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