web-dev-qa-db-ja.com

HTML5 Video要素が再生されているかどうかを検出

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");
    }
  }
}
javascripthtml5videojavascript-eventshtml5-video
61
user1076821

注：この回答は2011年に出されました。先に進む前に、HTML5ビデオの更新されたドキュメントを確認してください。

ビデオが一時停止しているかどうかだけを知りたい場合は、stream.pausedフラグを使用します。

再生ステータスを取得するためのvideo要素のプロパティはありません。ただし、再生を開始するとトリガーされるイベント「再生中」が1つあります。イベント「終了」は、再生を停止するとトリガーされます。

だから解決策は

  1. 1つの変数をデカールしますvideoStatus
  2. ビデオのさまざまなイベントにイベントハンドラーを追加する
  3. イベントハンドラーを使用して更新videoStatus
  4. videoStatusを使用して、ビデオのステータスを識別します

このページは、ビデオイベントについてのより良いアイデアを提供します。このページでビデオを再生し、イベントがトリガーされる方法を確認してください。
http://www.w3.org/2010/05/video/mediaevents.html

22
Diode

!stream.pausedだけをチェックできるように思えます。

97
Samuel Cole

<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
}
25
Raees Iqbal
jQuery(document).on('click', 'video', function(){
        if (this.paused) {
            this.play();
        } else {
            this.pause();
        }
});
15
geilt

メディア要素にイベントリスナーを追加します。トリガーできるイベントは次のとおりです。 オーディオおよびビデオメディアイベント

<!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>
10
Kurt Van den Branden

afterが再生を開始するまでイベントリスナーをプレーヤーに追加できないという同様の問題が発生したため、残念ながら@Diodeのメソッドは機能しませんでした。私の解決策は、プレーヤーの「一時停止」プロパティがtrueに設定されているかどうかを確認することでした。これは、ユーザーが「一時停止」をクリックしたときだけでなく、ビデオの再生が開始する前と終了した後でも「一時停止」がtrueに設定されているためです。

3
cjroth

これは、ビデオの再生中または一時停止中に誤ってページを離れないようにするために 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.";
    };
}
2
Michael Kennedy
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");

  }

}
1
Mr. Anno-Dankyi Kwaku

ちょっとした例

var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')

if (audio.paused) {
  audio.play()
} else {
  audio.pause()
}
1
Preschian

Html videoタグのonpauseおよびonplayプロパティを使用して、非常に簡単に実行しました。グローバル変数を切り替えるJavaScript関数を作成して、ページが他の関数のビデオのステータスを認識できるようにします。

以下のJavascript：

   // onPause function
   function videoPause() {
      videoPlaying = 0;
   }

   // onPause function
   function videoPlay() {
      videoPlaying = 1;
   }

HTMLビデオタグ：

<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
                             <source src="video/myvideo.mp4" type="video/mp4">

                            </video>

onclick javascriptを使用して、この場合はvideoPlayingのステータス変数に応じて何かを行うことができます。

お役に立てれば...

0
JediSal

@tracevipinが追加したリンク（ http://www.w3.org/2010/05/video/mediaevents.html ）を見て、「paused」という名前のプロパティを見ました。

私はそれをテストしましたが、うまく動作します。

0
Simon the Salmon

これは私のコードです-関数play()を呼び出すと、ビデオが再生または一時停止し、ボタンの画像が変更されます。

関数volume()を呼び出すと、ボリュームのオン/オフが切り替わり、ボタンの画像も変わります。

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';
  }
}
0
Damaris