单击 HTML 5 Video 元素播放、暂停视频、中断播放按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18326973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clicking HTML 5 Video element to play, pause video, breaks play button
提问by user2698522
I'm trying to get the video to be able to play and pause like it does YouTube (Using both the play and pause button, and clicking the video itself.)
我试图让视频能够像 YouTube 一样播放和暂停（同时使用播放和暂停按钮，并单击视频本身。）
<video width="600" height="409" id="videoPlayer" controls="controls">
<!-- MP4 Video -->
<source src="video.mp4" type="video/mp4">
</video>
<script>
var videoPlayer = document.getElementById('videoPlayer');
// Auto play, half volume.
videoPlayer.play()
videoPlayer.volume = 0.5;
// Play / pause.
videoPlayer.addEventListener('click', function () {
if (videoPlayer.paused == false) {
videoPlayer.pause();
videoPlayer.firstChild.nodeValue = 'Play';
} else {
videoPlayer.play();
videoPlayer.firstChild.nodeValue = 'Pause';
}
});
</script>
Do you have any ideas why this would break the play and pause control button?
您知道为什么这会破坏播放和暂停控制按钮吗？
回答by oabarca
The simplest form is to use the onclicklistener:
最简单的形式是使用onclick监听器：
<video height="auto" controls="controls" preload="none" onclick="this.play()">
<source type="video/mp4" src="vid.mp4">
</video>
No jQuery or complicated Javascript code needed.
不需要 jQuery 或复杂的 Javascript 代码。
Play/Pause can be done with onclick="this.paused ? this.play() : this.pause();".
播放/暂停可以用 来完成onclick="this.paused ? this.play() : this.pause();"。
回答by Mickey
Not to bring up an old post but I landed on this question in my search for the same solution. I ended up coming up with something of my own. Figured I'd contribute.
不要提出旧帖子，但我在寻找相同的解决方案时遇到了这个问题。我最终想出了一些我自己的东西。想我会有所贡献。
HTML:
HTML：
<video class="video"><source src=""></video>
JAVASCRIPT: "JQUERY"
JAVASCRIPT: "JQUERY"
$('.video').click(function(){this.paused?this.play():this.pause();});
回答by Roberts126
Adding return false;worked for me:
添加return false;对我有用：
jQuery version:
jQuery 版本：
$(document).on('click', '#video-id', function (e) {
var video = $(this).get(0);
if (video.paused === false) {
video.pause();
} else {
video.play();
}
return false;
});
Vanilla JavaScript version:
香草 JavaScript 版本：
var v = document.getElementById('videoid');
v.addEventListener(
'play',
function() {
v.play();
},
false);
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
return false;
};
回答by ios-lizard
I had countless issues doing this but finally came up with a solution that works.
我在这样做时遇到了无数问题，但最终想出了一个有效的解决方案。
Basically the code below is adding a click handler to the video but ignoring all the clicks on the lower part (0.82 is arbitrary but seems to work on all sizes).
基本上，下面的代码向视频添加了一个点击处理程序，但忽略了下部的所有点击（0.82 是任意的，但似乎适用于所有尺寸）。
$("video").click(function(e){
// get click position
var clickY = (e.pageY - $(this).offset().top);
var height = parseFloat( $(this).height() );
// avoids interference with controls
if(y > 0.82*height) return;
// toggles play / pause
this.paused ? this.play() : this.pause();
});
回答by jkrz
I had this same problem and solved it by adding an event handler for the play action in addition to the click action. I hide the controls while playing to avoid the pause button issue.
我遇到了同样的问题，除了点击动作之外，还通过为播放动作添加一个事件处理程序来解决它。我在播放时隐藏控件以避免暂停按钮问题。
var v = document.getElementById('videoID');
v.addEventListener(
'play',
function() {
v.play();
},
false);
v.onclick = function() {
if (v.paused) {
v.play();
v.controls=null;
} else {
v.pause();
v.controls="controls";
}
};
Seeking still acts funny though, but at least the confusion with the play control is gone. Hope this helps.
尽管寻找仍然很有趣，但至少与游戏控制的混淆消失了。希望这可以帮助。
Anyone have a solution to that?
任何人都有解决方案？
回答by Nathan
Following up on ios-lizard's idea:
跟进ios-lizard的想法：
I found out that the controls on the video are about 35 pixels. This is what I did:
我发现视频上的控件大约是 35 像素。这就是我所做的：
$(this).on("click", function(event) {
console.log("clicked");
var offset = $(this).offset();
var height = $(this).height();
var y = (event.pageY - offset.top - height) * -1;
if (y > 35) {
this.paused ? this.play() : this.pause();
}
});
Basically, it finds the position of the click relative to the element. I multiplied it by -1 to make it positive. If the value was greater than 35 (the height of the controls) that means that the user click somewhere else than the controls Therefore we pause or play the video.
基本上，它会找到相对于元素的点击位置。我将它乘以 -1 使其为正。如果该值大于 35（控件的高度），则表示用户单击了控件以外的其他位置，因此我们暂停或播放视频。
回答by Offbeatmammal
The problem appears to be internal bubbling within the <video>element ... so when you click on the "Play" button the code triggers and then the play button itself get triggered :(
问题似乎是<video>元素内的内部冒泡......所以当你点击“播放”按钮时，代码触发，然后播放按钮本身被触发:(
I couldn't find a simple (reliable) way to stop the click bubbling through (logic tells me there should be a way, but... it escapes me right now)
我找不到一种简单（可靠）的方法来阻止点击冒泡（逻辑告诉我应该有办法，但是......它现在让我逃脱了）
Anyway, the solution I found to this was to put a transparent <div>over the video sized to fit down to where the controls appear... so if you click on the div then your script controls play/pause but if the user clicks on the controls themselves then the <video>element handles that for you.
无论如何，我找到的解决方案是<div>在视频上放置一个透明的大小以适应控件出现的位置......所以如果你点击div然后你的脚本控制播放/暂停但是如果用户点击控件自己然后<video>元素为你处理。
The sample below was sized for my video so you may need to juggle sizes of the relative <div>s but it should get you started
下面的示例适合我的视频大小，因此您可能需要调整相关<div>s 的大小，但它应该可以帮助您入门
<div id="vOverlay" style="position:relative; width:600px; height:300px; z-index:2;"></div>
<video style="position:relative; top:-300px; z-index:1;width:600px;height:340px;" width="600" height="409" id=videoPlayer controls="controls">
<source src="video.mp4" type="video/mp4">
</video>
<script>
var v = document.getElementById('videoPlayer');
var vv = document.getElementById('vOverlay');
<!-- Auto play, Half volume -->
v.play()
v.volume = 0.5;
v.firstChild.nodeValue = "Play";
<!-- Play, Pause -->
vv.addEventListener('click',function(e){
if (!v.paused) {
console.log("pause playback");
v.pause();
v.firstChild.nodeValue = 'Pause';
} else {
console.log("start playback")
v.play();
v.firstChild.nodeValue = 'Play';
}
});
</script>
