javascript - 单击关闭图标时暂停或停止视频

Question

我想在按下关闭 (X) 图标时暂停/停止视频。 现在，当我单击 X 按钮时，视频会在后台继续播放。 我还希望关闭图标应该出现在播放器本身而不是播放器之外。

var hideStr = 'X', 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;
  });
}
$('hideStr').click(function(){
  $(".playvideo").pause();       // Tag name used as a selector
});

div.relative {
    position: relative;
	 left: 00px;
}
.close {
    font-size: 10px;   
    position: inherit;
    top: 5px; right: 5px;
}
.hide {
    display: none;
}

<div>
    <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">X</button>
	</div>

Answer 1

let video = document.querySelector('video');

let close = document.querySelector('.close');


close.onclick = () => {
    video.pause();
}

在javascript中