HTML5 동영상 요소가 재생 중인지 감지
HTML5 요소가 재생 중인지 알아보기 위해 몇 가지 질문을 살펴 봤지만 답을 찾을 수 없습니다. W3 설명서를 살펴 보았는데 "playing"이라는 이벤트가 있지만 작동하지 않는 것 같습니다.
이것은 내 현재 코드입니다.
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 년에 제공되었습니다. 계속하기 전에 HTML5 비디오에 대한 업데이트 된 문서를 확인하십시오.
동영상이 일시 중지되었는지 여부 만 알고 싶다면 플래그를 사용하세요 stream.paused.
재생 상태를 얻기위한 비디오 요소에 대한 속성이 없습니다. 그러나 재생을 시작할 때 트리거되는 하나의 이벤트 "재생 중"이 있습니다. 이벤트 "종료"는 재생이 중지되면 트리거됩니다.
그래서 해결책은
- 하나의 변수 videoStatus 데칼
- 비디오의 다양한 이벤트에 대한 이벤트 핸들러 추가
- 이벤트 핸들러를 사용하여 videoStatus 업데이트
- videoStatus 를 사용 하여 비디오 상태 식별
이 페이지는 비디오 이벤트에 대한 더 나은 아이디어를 제공합니다. 이 페이지에서 비디오를 재생하고 이벤트가 어떻게 트리거되는지 확인하십시오.
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();
}
});
미디어 요소에 이벤트 리스너를 추가합니다. 트리거 될 수있는 가능한 이벤트는 다음 과 같습니다. 오디오 및 비디오 미디어 이벤트
<!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
media.addEventListener("playing", function() {
$("#output").html("Playing event triggered");
});
// Pause event
media.addEventListener("pause", function() {
$("#output").html("Pause event triggered");
});
// Seeking event
media.addEventListener("seeking", function() {
$("#output").html("Seeking event triggered");
});
// Volume changed event
media.addEventListener("volumechange", function(e) {
$("#output").html("Volumechange event triggered");
});
</script>
</body>
</html>나는 때까지 플레이어에 이벤트 리스너를 추가 할 수 없습니다 비슷한 문제가 발생 후 너무 다이오드의 방법 불행히도 것 일 @, 이미 연주하기 시작했다합니다. 내 해결책은 플레이어의 "paused"속성이 true로 설정되었는지 확인하는 것입니다. 이는 사용자가 "일시 중지"를 클릭했을 때뿐만 아니라 비디오 재생이 시작되기 전과 종료 된 후에도 "일시 중지"가 true로 설정되어 있기 때문입니다.
다음은 http://www.develop.com/webcasts 에서 비디오를 재생하거나 일시 중지하는 동안 사람들이 실수로 페이지를 떠나는 것을 방지하기 위해 사용 하는 방법입니다.
$(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.";
};
}
약간의 예
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
if (audio.paused) {
audio.play()
} else {
audio.pause()
}function playPauseThisVideo(this_video_id){
var this_video = document.getElementById(this_video_id);
if(this_video.paused){
console.log("VIDEO IS PAUSED");
} else {
console.log("VIDEO IS PLAYING");
}
}
I just looked at the link @tracevipin added (http://www.w3.org/2010/05/video/mediaevents.html), and I saw a property named "paused".
I have ust tested it and it works just fine.
This is my code - by calling the function play() the video plays or pauses and the button image is changed.
By calling the function volume() the volume is turned on/off and the button image also changes.
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';
}
}
I just did it very simply using onpause and onplay properties of the html video tag. Create some javascript function to toggle a global variable so that the page knows the status of the video for other functions.
Javascript below:
// onPause function
function videoPause() {
videoPlaying = 0;
}
// onPause function
function videoPlay() {
videoPlaying = 1;
}
Html video tag:
<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
<source src="video/myvideo.mp4" type="video/mp4">
</video>
than you can use onclick javascript to do something depending on the status variable in this case videoPlaying.
hope this helps...
참고URL : https://stackoverflow.com/questions/8599076/detect-if-html5-video-element-is-playing
'program tip' 카테고리의 다른 글
| Android 대화 상자, 버튼을 눌렀을 때 대화 상자를 열어 둡니다. (0) | 2020.11.27 |
|---|---|
| 7 월-SLF4J 브리지 (0) | 2020.11.27 |
| Webstorm이 JavaScript 파일을 인식하지 못함 (0) | 2020.11.26 |
| Laravel-http 상태 코드와 함께 json 반환 (0) | 2020.11.26 |
| 기본 자격 증명을 사용하려면 기본 프록시를 어떻게 설정해야합니까? (0) | 2020.11.26 |