🎦
HTMLの<video>と<audio>でJavaScriptを使わずに再生範囲を指定する
HTML の <video> や <audio> で動画や音声を途中から再生させたいときに、素の JavaScript や jQuery を使って再生範囲を指定している記事が多くありました。
私はこのためだけに JavaScript を書きたくなかったので、 JavaScript なしで動画や音声を途中から再生させる方法を調べました。
再生範囲の指定方法
MDN Web Docs を確認したところ、ちゃんと書いてありました。
When specifying the URI of media for an
<audio>or<video>element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.A time range is specified using the syntax:
#t=[starttime][,endtime]
使用例は以下の通りです。
<!-- 5 秒目 ~ 10 秒目を再生させたい場合 -->
<video src="http://example.org/movie.mp4#t=5,10"></video>
<!-- 5 秒目 ~ 動画の終わりまで再生させたい場合 -->
<video src="http://example.org/movie.mp4#t=5"></video>
この方法の仕様
W3C で Media Fragments URI 1.0 (basic) として定義されていました。
発行年月日が 2012 年と古かったので不安でしたが、HTML Living Standard にもリンクがありました。
ブラウザの独自仕様だったらどうしようと心配していましたが、これで安心して #t= で再生範囲を指定できます。
Discussion