Question

我有一个可以罚款的HTML5视频，我遇到的问题是它没有关闭按钮。如何在视频播放器中包含关闭按钮？这是我的代码：

<div style="text-align:center">
    <video id="playvideo" width="450" controls>
        <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">        
    </video>
</div>

http://jsfiddle.net/76j7129f/3/

Answer 1

<强> SOLUTION

HTML

<div style="text-align:center">
  <video id="playvideo" width="450" controls="controls" >
    <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />        
  </video>
  <button class="close">Hide</button>
</div>

CSS

video + button.close {
  font-size: 10px;   
  display: block;
}
video.hide {
  display: none;
}

JS

var hideStr = 'Hide', showStr = 'Show', hideClass = 'hide';
var buttons = document.querySelectorAll('video + button.close');
for(var b = 0; b < buttons.length; b++){
  var button = buttons[b];
  button.addEventListener('click', function(){
    var video = this.parentNode.childNodes[1];
    video.muted = !video.muted;
    video.classList.toggle (hideClass);
    if(this.textContent == hideStr) this.textContent = showStr;
    else this.textContent = hideStr;
  });
}

更新

<强> JQUERY SOLUTION

HTML

<script src="//code.jquery.com/jquery-git1.js"></script>

JQUERY

var hideStr = 'Hide', showStr = 'Show', hideClass = 'hide';
$('video + button.close').click(function(){
  var button = $(this);
  var video = button.parent().find('video');
  video.prop('muted', !video.prop('muted'));
  video.toggleClass(hideClass);
  if(button.text() == hideStr) button.text(showStr);
  else button.text(hideStr);
});

如何在HTML5视频播放器中包含关闭按钮

1 个答案: