JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

同じページでHTML動画が再読み込みされるのを防ぐ方法【preload属性の使い方】

HTML動画の再読み込みを防ぐには？

同じページ内でHTMLの動画が何度も再読み込みされてしまう問題を防ぐには、<video>タグに preload="auto" を指定します。この属性を設定すると、ページが読み込まれた時点でブラウザが動画データを事前に読み込むため、再生時の再読み込みが発生しなくなります。

サンプルコード

以下は、preload="auto" を使った具体的な実装例です。

<!DOCTYPE html>
<html>
  <body>
    <video width="350" height="200" controls="controls" preload="auto">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
      お使いのブラウザはvideoタグに対応していません。
    </video>
  </body>
</html>

preload属性の値について

preload属性には、動画の読み込み動作を制御するための3つの値を指定できます。

  • auto：ページ読み込み時に動画全体を事前に読み込みます。再読み込みを防ぎたい場合はこの値を指定します。
  • metadata：動画の長さやサイズなどのメタデータのみを読み込みます。データ通信量を抑えたい場合に有効です。
  • none：動画を事前に読み込みません。ユーザーが再生ボタンを押した時点で読み込みが開始されます。

なお、<source>タグでMP4やOGGなど複数の形式を指定しておくと、ブラウザが対応している形式を自動的に選択するため、さまざまな環境で動画を再生できます。

  1. HTMLメタタグを使ったページリダイレクトの方法【初心者向け解説】

    ページリダイレクトとは、あるURLをクリックしてページXにアクセスしようとしたのに、実際には別のページYへ自動的に転送される仕組みのことです。Webサイトの引っ越しやURL変更の際によく使われる重要なテクニックです。 メタタグでリダイレクトを実現する基本 METAタグを使ってサイトをリダイレクトさせるのは非常に簡単です。http-equiv属性を使用し、content属性の値に対するHTTPヘッダーを指定します。 以下は、現在のページから別のページへ2秒後にリダイレクトさせる例です。もし即座にリダイレクトしたい場合は、content属性で待機秒数を指定しなければOKです。 コード例 <

  2. YouTubeを見ながらWebサイトを閲覧する方法｜Chrome拡張機能「Sideplayer」の使い方

    別のタブに切り替えてもYouTube動画を見続けたいと思ったことはありませんか？そんなときに便利なのがChrome拡張機能「Sideplayer」です。この拡張機能を使えば、YouTube動画が小さなポップアップウィンドウで再生され、タブやウィンドウを移動しても表示が維持されます。 Sideplayerの導入方法と基本的な使い方 まず、ChromeウェブストアからSideplayerをインストールし、Chromeを再起動しましょう。その後、YouTubeにアクセスして任意の動画を開き、動画下部にある「Play In Sideplayer」ボタンをクリックします。これだけで、動画がコンパクトなプ