お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

JS VIDEOの音声ピッチを変えずに再生速度を変える

どーもー。

ブンブン丸です。

今回はJavascriptネタでございます。

とあるお客様が

・HTMLでビデオを再生する際に再生速度の変更機能を実装したい。

・そして2倍速再生等をしても音声ピッチは変更したくない。

との要望が。

htmlなのでvideoタグでplaybackRateを使っただけでは再生速度の変更とともに音声ピッチも変わってしまいます。

ということで便利なvideo.jsの登場です。

・まずはダウンロード

・head内にcssとjsを追加

<head> 
	<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet"> 
	<!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> 
	<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script> 
</head>

・body内にvideoタグ等もろもろ追加

<body>
	<video id='my-video' class='video-js' controls preload='auto' width='640' height='264' poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
		<source src='MY_VIDEO.mp4' type='video/mp4'>
		<source src='MY_VIDEO.webm' type='video/webm'>


			To view this video please enable JavaScript, and consider upgrading to a web browser that
	      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
		

	</video>
	<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
</body>

・再生速度を変えるにはvideo.jsを読み込んだ後に次の記述を追加すればOK!

  <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
  <script>
    (function(window, videojs) {
      var player = window.player = videojs('my-video', {
  playbackRates: [0.5, 1, 1.5, 2]
});
    }(window, window.videojs));
  </script>

これで再生速度を変えても音声ピッチは変わらないはずです!

まいおし。

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00