單擊關閉圖標時暫停或停止視頻

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; 
 
\t left: 00px; 
 
} 
 
.close { 
 
    font-size: 10px; 
 
    position: inherit; 
 
    top: 5px; right: 5px; 
 
} 
 
.hide { 
 
    display: none; 
 
}

<div> 
 
    <video id="playvideo" width="450" controls="controls" > 
 
\t <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />   
 
    </video> 
 
\t  <button class="close">X</button> 
 
\t </div>

Answer 1

請更改

$('hideStr').click(function(){ 
    $("#playvideo").pause();  // Tag name used as a selector 
}); 

在調用playVideo被提及作爲ID不類的代碼。

Answer 2

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

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


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

在JavaScript

Answer 3

他們問題的是：

1. 選擇被錯在你的DOM
2. 而hideStr ID不是在你的html.and也是其不正確的關閉按鈕的選擇
3. pause()' its dom object not jquery so try with elemnt [0]`

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")[0].pause();  
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <video id="playvideo" width="450" controls="controls" > 
 
\t <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />   
 
    </video> 
 
\t  <button class="close" id="hideStr">X</button> 
 
\t </div>

Answer 4

無需進行播放和暫停單獨的事件處理程序。您已經在按鈕上有單擊事件處理程序。

只需檢查按鈕文本。如果是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; 
 
    if(this.textContent === hideStr){ //Pause the video. 
 
     video.pause(); 
 
    } else { 
 
     video.play(); 
 
    } 
 
    video.classList.toggle (hideClass); 
 
    if(this.textContent == hideStr) this.textContent = showStr; 
 
    else this.textContent = hideStr; 
 
    }); 
 
}

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

<div> 
 
    <video id="playvideo" width="450" controls="controls" > 
 
\t <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />   
 
    </video> 
 
\t  <button class="close">X</button> 
 
\t </div>