ポスター属性を持つHTML5ビデオがあります。ビデオ要素(ポスター画像の領域)の任意の場所をクリックして、再生イベントを発生させてビデオを開始できるように、どういうわけか設定したいですか?これはかなり標準的な慣行だと思いますが、フラッシュなしでこれを行う方法を見つけることはできません。どんな助けでも大歓迎です。
これは私にとってアンドリューです。
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();"/>
これを投稿 こちら もこのスレッドに適用されます。
これを行うには無数の問題がありましたが、最終的には機能するソリューションを思い付きました。
基本的に、以下のコードはクリックハンドラーをビデオに追加しますが、下部のすべてのクリックを無視します(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();
}
});
Poster属性を使用しても、動作は変わりません。ビデオの読み込み中にその画像を表示するだけです。ビデオを自動的に開始する(ブラウザの実装がそれを行わない場合)ので、次のようなことをしなければなりません:
<video id="video" ...></video>
jqueryを使用してjavascriptで:
$('#video').click(function(){
document.getElementById('video').play();
});
それが役に立てば幸い
はい、それはブラウザの作成者やhtml仕様の作成者が「忘れた」通常の機能のように聞こえます。
私はいくつかのソリューションを作成しましたが、それらのどれも真にクロスブラウザまたは100%固体ではありません。ビデオコントロールのクリックに関する問題を含めると、ビデオが停止するという意図しない結果が生じます。代わりに、VideoJSなどの実績のあるソリューションを使用することをお勧めします。 http://videojs.com/
これは、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>
)
}
Get(0)を使用しても機能します
var play = $('.playbutton');
var video = $('#video');
play.click(function(){
video.get(0).play();
})