web-dev-qa-db-ja.com

HTML5ビデオが再生するポスター画像をクリックしますか？

ポスター属性を持つHTML5ビデオがあります。ビデオ要素（ポスター画像の領域）の任意の場所をクリックして、再生イベントを発生させてビデオを開始できるように、どういうわけか設定したいですか？これはかなり標準的な慣行だと思いますが、フラッシュなしでこれを行う方法を見つけることはできません。どんな助けでも大歓迎です。

jqueryhtml5video
33
Andrew

これは私にとってアンドリューです。

HTMLヘッドに次のjsを追加します。

var video = document.getElementById('video');
video.addEventListener('click',function(){
    video.play();
},false);

または、onlick属性をhtml要素に直接追加するだけです：

<video src="your_video" width="250" height="50" poster="your_image" onclick="this.play();"/>
65
emags

これを投稿 こちら もこのスレッドに適用されます。

これを行うには無数の問題がありましたが、最終的には機能するソリューションを思い付きました。

基本的に、以下のコードはクリックハンドラーをビデオに追加しますが、下部のすべてのクリックを無視します（0.82は任意ですが、すべてのサイズで機能するようです）。

$("video").click(function(e){

    // handle click if not Firefox (Firefox supports this feature natively)
    if (typeof InstallTrigger === 'undefined') {

        // get click position 
        var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controls
        if (clickY > 0.82*height) return;

        // toggles play / pause
        this.paused ? this.play() : this.pause();
    }
});
17
ios-lizard

Poster属性を使用しても、動作は変わりません。ビデオの読み込み中にその画像を表示するだけです。ビデオを自動的に開始する（ブラウザの実装がそれを行わない場合）ので、次のようなことをしなければなりません：

<video id="video" ...></video>

jqueryを使用してjavascriptで：

$('#video').click(function(){
   document.getElementById('video').play();
});

それが役に立てば幸い

6
tiagoboldt

はい、それはブラウザの作成者やhtml仕様の作成者が「忘れた」通常の機能のように聞こえます。

私はいくつかのソリューションを作成しましたが、それらのどれも真にクロスブラウザまたは100％固体ではありません。ビデオコントロールのクリックに関する問題を含めると、ビデオが停止するという意図しない結果が生じます。代わりに、VideoJSなどの実績のあるソリューションを使用することをお勧めします。 http://videojs.com/

4
deepwell

これは、reactとes6で行っていました。以下は、ダニエルゴールデンのソリューションを読んだ後に作成した最新バージョンです。

const Video = ({videoSources, poster}) => {
  return (
    <video
      controls
      poster={poster}
      onClick={({target: video}) => video.paused ? video.play() : video.pause()}
    >
      {_.map(videoSources, ({url, type}, i) =>
        <source key={i} src={url} type={type} />
      )}
    </video>
  )
}
0
William Frazier

Get（0）を使用しても機能します

    var play = $('.playbutton');
    var video = $('#video');
    play.click(function(){
        video.get(0).play();
    })
0
Jry