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

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

​​

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

UPDATE

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