Question

我想在按下关闭（X）图标时暂停/停止视频。现在当我点击X按钮时，视频会继续在后台播放。此外，我希望关闭的图标应该出现在播放器上，不在播放器之外。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

请更改

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

在代码中，playvideo被称为id而不是class。

Answer 2

    <script>
    function openRead(){
    var excel = activeXObject("Excel.Application");
            excel.visible = false;
            var file = exel.workbooks.open("C:\Users\Utilizador\Desktop\teste.xlsx").activeSheet.cell(1,1).value;

var div = document.getElementById("div1").text;
div = file;
}
</script>

在javascript中

Answer 3

他们的问题是：

选择器在你的dom中出错了
并且hideStr ID不在你的html中。而且它也不是关闭按钮的正确选择器
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;
	 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" >
	   <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />        
    </video>
	    <button class="close" id="hideStr">X</button>
	</div>

Answer 4

播放和暂停不需要单独的事件处理程序。您已经在按钮上有click事件处理程序。

只需检查按钮文字。如果是X则暂停视频，否则播放。

请参阅下面的代码。（我不知道你是否想在其他部分播放视频部分。如果你不需要，请评论它）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

4 个答案: