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

JavaScriptでWebページのvideoタグ（動画）を非表示にする方法

はじめに

Webページに、次のようなサンプルのvideoタグが設置されている場面を想定してみましょう。

<video class="hideVideo" width="350" height="255" controls>
    <source src="" id="unique_video_id">
    こちらでは動画を再生できません......
</video>

Webページ上の動画を非表示にしたい場合は、yourVariableName.style.display = "none" を使用します。displayプロパティをnoneに設定することで、対象のvideoタグを画面上から完全に隠すことができます。

実装例

以下に、実際のコード全体を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<style>
    .hideVideo {
        display: block;
        z-index: 999;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>
<body>
    <video class="hideVideo" width="350" height="255" controls>
    <source src="" id="unique_video_id">
        こちらでは動画を再生できません......
    </video>
</body>
<script>
    var hideVideo = document.getElementsByClassName("hideVideo")[0];
    hideVideo.style.display = "none";
</script>
</html>

上記のプログラムを実行するには、まずファイル名を「anyName.html（index.html）」として保存してください。続いて、Visual Studio Codeエディター内でファイルを右クリックし、「Open with Live Server」オプションを選択します。

実行結果

コンソールには、次のような出力が表示されます。

JavaScriptでWebページのvideoタグ（動画）を非表示にする方法

上記の出力例では、videoタグが非表示になっていることが確認できます。もし動画を再び表示したい場合は、先ほど追加したコード行をコメントアウトするだけでOKです。

//hideVideo.style.display = "none";

この行をコメントアウトして再度ページを読み込むと、videoタグが有効になり、以下のように画面に動画が表示されるようになります。

JavaScriptでWebページのvideoタグ（動画）を非表示にする方法

まとめ

本記事では、JavaScriptを使ってWebページ上のvideoタグを非表示にする方法を解説しました。ポイントは style.display = "none" の一行を指定するだけというシンプルさです。逆に表示を戻したい場合は、"block" や "inline-block" を設定するか、該当行をコメントアウトすることで元の状態に復帰できます。ボタンのクリックなどユーザー操作に応じて動的に切り替えたい場合も、この仕組みを組み合わせることで柔軟な実装が可能です。

  1. JavaScriptのonclickでブラウザを前のページに戻す方法

    ボタンをクリックしたときに前のページへ戻るようにするには、JavaScriptの window.history.go(-1) を使用します。これはブラウザの履歴を1つ前に遡る動作で、いわゆる「戻る」ボタンと同じ挙動を実現できます。実装例以下は、input要素のonclick属性に window.history.go(-1) を指定したシンプルなサンプルコードです。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=wid

  2. HTMLページにYouTube動画を埋め込む方法【初心者向け解説】

    YouTubeの動画は、Webページにとても簡単に追加できます。必要なのは、動画を「埋め込む（エンベッド）」ことだけです。この記事では、動画IDの取得方法から、実際にHTMLへ動画を埋め込む手順まで、サンプルコード付きでわかりやすく解説します。 1. 動画IDを取得する まず、埋め込みたい動画の動画IDを取得しましょう。 ステップ1： 対象の動画を開き、動画上で右クリックします。表示されたメニューから「Stats for nerds（統計情報）」を選択してください。 選択すると、以下のようなダイアログボックスが表示され、動画の詳細な統計情報を確認できます。 上の画像では、動画IDが「F6m