web-dev-qa-db-ja.com

JQueryを使用してHTML 5ビデオを再生/一時停止する

私はJQueryを使ってHTML5ビデオをコントロールしようとしています。タブ付きインターフェースに2つのクリップがあります。合計6つのタブがあり、他のものにはイメージがあります。タブをクリックしたときにビデオクリップを再生し、他のいずれかをクリックしたときにビデオクリップを停止するようにしています。

これは簡単なことではありませんが、動作させることはできません。ビデオの再生に使用しているコードは次のとおりです。

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

私はそれを制御できるようにするためにvideo要素を関数の中に公開する必要があることを読みましたが、例を見つけることができません。私はそれをJSを使って動作させることができます：

document.getElementById('movie1').play();

どんなアドバイスも素晴らしいでしょう。ありがとう

jqueryhtmlcsshtml5html5-video
183
Barny83

あなたの解決策はここで問題を示しています - playはjQuery関数ではなくDOM要素の関数です。したがって、DOM要素でそれを呼び出す必要があります。ネイティブDOM関数を使用してこれを行う方法の例を示します。あなたがこれを既存のjQueryの選択に合うようにしたいのであれば、同等のjQueryは$('#videoId').get(0).play()になります。 （ get は、jQueryの選択からネイティブDOM要素を取得します。）

321
lonesomeday

これが私がどうやってそれを機能させることができたかです：

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

私のHTML5タグはすべてクラス 'myHTMLvideo'を持っています

53
Miguel Tavares

できるよ

$('video').trigger('play');
$('video').trigger('pause');
45
wonder

なぜあなたはjQueryを使う必要があるのですか？あなたの提案した解決策はうまくいく、そしてそれはおそらくjQueryオブジェクトを構築するより速い。

document.getElementById('videoId').play();
20
sudo work

複数の動画を一時停止するために、これがうまく機能することがわかりました。

$("video").each(function(){
    $(this).get(0).pause();
});

これはかなり便利なクリック機能に入れることができます。

19
Josh Holmes

Lonesomedayの答えの延長として、あなたも使うことができます

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

Get（）またはeq（）jQuery関数が呼び出されていないことに注意してください。 DOMの配列でplay（）関数を呼び出していました。覚えておくのがショートカットです。

13
ozanmuyes

私はこれが好きです：

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

それが役に立てば幸い。

10
user4227915

FancyBoxとjQueryを使用してビデオを埋め込みます。 IDを付けます。

たぶん、最良のソリューションはプレイ/一時停止を異なる方法で切り替えることはできませんが、私とIT WORKSにとっては簡単です！ :)

の中に

`

<input type="hidden" id="current_video_playing">

<input type="hidden" id="current_video_status" value="playing">

<video id="video-1523" autobuffer="false" src="movie.mp4"></video>

<script>

// Play Pause with spacebar

$(document).keypress(function(e) { 

    theVideo = document.getElementById('current_video_playing').value

    if (e.which == 32) {

        if (document.getElementById('current_video_status').value == 'playing') {

            document.getElementById(theVideo).pause();

            document.getElementById('current_video_status').value = 'paused'

        } else {

            document.getElementById('current_video_status').value = 'playing'

            document.getElementById(theVideo).play();

        }

    }

});

</script>`
4
Alexander W

これは私たちが使うことができる簡単な方法です

jqueryボタンクリック機能

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

ありがとう

2
subindas pm

注意してください、あなたがそれを呼び出すことを試みる前に、あなたがブラウザがビデオ機能をサポートするかどうか確認することを確認してください：

if($('#movie1')[0].play)
    $('#movie1')[0].play();

これはvideoタグをサポートしていないブラウザでのJavaScriptエラーを防ぎます。

1
Alex W

セレクタを使ったJQueryによる

$("video_selector").trigger('play');  
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');

IDを使用してJavascriptで

video_ID.play();  video_ID.pause();

OR

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();
1
user1570636
    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>
0
KEERTHAN K C
<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script> 
$(document).ready(function(){
document.getElementById('vid').play(); });
</script>
0
Anusuya

私もそれをこのように機能させました：

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});
0
Jasper Chang

これを使用してください。$('#video1').attr({'autoplay':'true'});

0
Antares500

@loneSomedayはそれを美しく説明しています。ここでは、再生/一時停止機能を実現する方法についても良いアイデアが得られるかもしれません。

クリックでビデオの再生/一時停止

0
sheelpriy