ユーザーに HTML5 ビデオ プレーヤーのコントロールを表示することはできますが、ビデオの一部を検索したり、音量を変更したりするなど、何も変更できないようにすることはできますか?
3 に答える
簡単な方法は、透明な要素をビデオの上に完全に配置することです。
たとえば、タイムラインのみを表示し、対話を許可しないカスタム ビデオ コントロールを作成することもできます。
それを行うには多くの方法があります。
最初の方法はvideo{pointer-events:none;}
、ユーザーがクリックしたりデフォルトのコントロールバーを使用したりできない を使用することです.しかし、ここではユーザーはビデオを再生/一時停止することもできません.したがって、再生/一時停止ボタンを追加する必要があります(スニペットで追加したように).
第二の方法はここにあります。ただし、プログレスバーとタイミングを追加する必要があります。(プログレスバー)
3 番目の方法は、 これを行うのに快適なライブラリまたはフレームワークを使用することです。たとえば。コントロールなしで動画を埋め込むにはYoutubeを使用します。これが最善の方法ですが、動画は Youtube にある必要があります。
var vid = document.getElementById("vid");
function play() {
if (vid.paused)
vid.play();
else
vid.pause();
}
video{pointer-events:none;}
<div>
<video id="vid" width="320" height="240" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br>
<button onclick="play()">Play/Pause</button>
ネイティブの HTML5<video>
要素では、この動作は許可されていません。しかし、Andy が言ったように、独自のコントロールを自由に提供して読み取り専用にすることができます。
HTML5 ビデオをラップし、スキン可能なコントロールを提供する JavaScript ライブラリであるMediaElementJSを見てください。たとえば、進行状況バーのソース コードを抽出し、それを変更してクリック ハンドラーを削除することができます。