🎦

HTMLの<video>と<audio>でJavaScriptを使わずに再生範囲を指定する

2022/10/04に公開約1,200字

HTML の <video><audio> で動画や音声を途中から再生させたいときに、素の JavaScript や jQuery を使って再生範囲を指定している記事が多くありました。
私はこのためだけに JavaScript を書きたくなかったので、 JavaScript なしで動画や音声を途中から再生させる方法を調べました。

再生範囲の指定方法

MDN Web Docs を確認したところ、ちゃんと書いてありました。

https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery#specifying_playback_range

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) として定義されていました。

https://www.w3.org/TR/media-frags/

発行年月日が 2012 年と古かったので不安でしたが、HTML Living Standard にもリンクがありました。

https://html.spec.whatwg.org/#dependencies

ブラウザの独自仕様だったらどうしようと心配していましたが、これで安心して #t= で再生範囲を指定できます。

Discussion

ログインするとコメントできます