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);
});
我需要X標誌位於右上角的媒體播放器 – user3811714 2014-09-02 13:00:30
然後使用CSS移動它。 – patricksweeney 2014-09-02 13:02:15
我該怎麼做 – user3811714 2014-09-02 13:03:55