检测HTML5video元素是否正在播放
我已经通过几个问题来看看是否正在播放HTML5元素，但找不到答案。 我看了W3的文档，它有一个名为“玩”的事件，但我似乎无法得到它的工作。
这是我现在的代码：
var stream = document.getElementsByTagName('video'); function pauseStream() { if (stream.playing) { for (var i = 0; i < stream.length; i++) { stream[i].pause(); $("body > header").addClass("paused_note"); $(".paused_note").text("Stream Paused"); $('.paused_note').css("opacity", "1"); } } } 注意：这个答案是2011年给出的。在继续之前，请检查HTML5video的更新文档。
如果您只想知道video是否已暂停，请使用标记streamstream.paused 。
video元素没有获取播放状态的属性。 但是有一个“玩”事件会在游戏开始时触发。 事件“结束”在它停止播放时被触发。
所以解决scheme是
- decalre一个可变的videoStatus
- 为不同的video事件添加事件处理程序
- 使用事件处理程序更新videoStatus
- 使用videoStatus来识别video的状态
这个页面会给你一个关于video事件的更好的想法。 在这个页面上播放video，看看事件是如何被触发的。
http://www.w3.org/2010/05/video/mediaevents.html
在我看来，你可以检查一下!stream.paused 。
我的答案是如何判断<video>元素是否正在播放？ ：
MediaElement没有一个属性来说明它的播放与否。 但是你可以为它定义一个定制的属性。
Object.defineProperty(HTMLMediaElement.prototype, 'playing', { get: function(){ return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); } })
现在，您可以在video或audio元素上使用它：
if(document.querySelector('video').playing){ // Do anything you want to }
jQuery(document).on('click', 'video', function(){ if (this.paused) { this.play(); } else { this.pause(); } });
添加eventlisteners到你的媒体元素。 可能触发的事件有： audio和video媒体事件
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Html5 media events</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body > <div id="output"></div> <video id="myVideo" width="320" height="176" controls autoplay> <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> </video> <script> var media = document.getElementById('myVideo'); // Playing event var isPlaying = function(e) { $("#output").html("Playing event triggered"); }; // Pause event var onPause = function(e) { $("#output").html("Pause event triggered"); }; // Volume changed event var onVolumechange = function(e) { $("#output").html("Volumechange event triggered"); }; // Seeking event var onSeeking = function(e) { $("#output").html("Seeking event triggered"); }; media.addEventListener("playing", isPlaying, false); media.addEventListener("pause", onPause, false); media.addEventListener("seeking", onSeeking, false); media.addEventListener("volumechange", onVolumechange, false); </script> </body> </html>
我遇到了一个类似的问题，那就是我无法将事件监听器添加到播放器中，直到它已经开始播放为止，所以@Diode的方法不幸运行。 我的解决scheme是检查玩家的“暂停”属性是否设置为true。 这是因为即使在video开始播放之前以及结束之后，“已暂停”设置为真，而不仅仅是当用户点击“暂停”时。
以下是我们在http://www.develop.com/webcasts上使用的内容，以防止人们在video播放或暂停期间意外离开页面。;
$(document).ready(function() { var video = $("video#webcast_video"); if (video.length <= 0) { return; } window.onbeforeunload = function () { var htmlVideo = video[0]; if (htmlVideo.currentTime < 0.01 || htmlVideo.ended) { return null; } return "Leaving this page will stop your video."; }; }
我只是看着链接@tracevipin添加（ http://www.w3.org/2010/05/video/mediaevents.html ），我看到一个名为“已暂停”的属性。
我已经testing过它，它工作得很好。
这是我的代码 – 通过调用函数play()video播放或暂停，button图像被改变。
通过调用functionvolume() ，音量被打开/closures，button图像也会改变。
function play() { var video = document.getElementById('slidevideo'); if (video.paused) { video.play() play_img.src = 'img/pause.png'; } else { video.pause() play_img.src = 'img/play.png'; } } function volume() { var video = document.getElementById('slidevideo'); var img = document.getElementById('volume_img'); if (video.volume > 0) { video.volume = 0 volume_img.src = 'img/volume_off.png'; } else { video.volume = 1 volume_img.src = 'img/volume_on.png'; } }
有点例子
var audio = new Audio('examples/mp3/SoundHelix-Song-1.mp3') if (audio.paused) { audio.play() } else { audio.pause() }
我只是简单地使用htmlvideo标签的onpause和onplay属性。 创build一些JavaScript函数来切换全局variables，以便页面知道其他函数的video状态。
下面的Javascript：
// onPause function function videoPause() { videoPlaying = 0; } // onPause function function videoPlay() { videoPlaying = 1; }
Htmlvideo标签：
<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" > <source src="video/myvideo.mp4" type="video/mp4"> </video>
比你可以使用onclick JavaScript来做一些事情取决于在这种情况下的状态variablesvideoPlaying。
希望这可以帮助…
