Dreamweaver を使用してビデオをポップアップし、自動的に閉じる方法-フロントエンドQ&A-php.cn

Dreamweaver を使用してビデオをポップアップし、自動的に閉じる方法

PHPz

リリース： 2023-04-25 17:48:55

オリジナル

773 人が閲覧しました

Dreamweaver の Javascript ポップアップビデオを自動的に閉じることは、Web ページのインタラクションを実現するための非常に便利なテクニックです。 Dreamweaver の Javascript スクリプト言語を使用すると、小さなウィンドウをポップアップ表示し、一定時間が経過すると自動的に閉じることができます。この手法は、ユーザーのログインプロンプト、イベントプロモーション、広告などの Web デザインでよく使用されます。この記事では、Dreamweaver を使用してビデオをポップアップし、自動的に閉じる方法を紹介します。

ステップ 1: ポップアップビデオを作成する

Dreamweaver で新しい HTML ドキュメントを作成し、「video」タグを追加します。「video」タグにビデオファイルの URL リンクを追加します。

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

ログイン後にコピー

上記のコードの「src」属性は、ビデオファイルの URL リンクアドレスと、「タイプ」を指定していることに注意してください。 " 属性はビデオファイル形式を指定します。ビデオ形式が「mp4」でない場合は、「type」属性を対応する形式に変更する必要があります。

ステップ 2: ポップアップウィンドウを作成する

Dreamweaver で新しい HTML ドキュメントを作成し、ボタンを追加します。ボタンの「onclick」イベントに次のコードを追加します。

<script>
function openpopup() {
  newwindow=window.open('','popup','width=500,height=400');
  newwindow.document.write('<html><head><title>Popup Window</title></head><body><video width="320" height="240"><source src="video.mp4" type="video/mp4"></video></body></html>');
}
</script>
<button onclick="openpopup()">弹出视频</button>

ログイン後にコピー

上記のコードでは、「openpopup()」関数を使用して新しいウィンドウを作成し、そのウィンドウにビデオタグを追加します。ビデオの URL リンクは、最初の手順で作成したビデオリンクと同じです。「newwindow」では、他の HTML 要素を追加して、よりリッチなポップアップウィンドウスタイルを実現することもできます。

ステップ 3: ポップアップウィンドウを自動的に閉じる

ポップアップウィンドウを自動的に閉じるには、JavaScript の「setTimeout」関数を使用できます。この関数は、一定の時間が経過した後にコードを実行するために使用されます。これを「window.close()」関数と組み合わせて使用すると、ポップアップウィンドウを自動的に閉じることができます。

<script>
function openpopup() {
  newwindow=window.open('','popup','width=500,height=400');
  newwindow.document.write('<html><head><title>Popup Window</title></head><body><video width="320" height="240"><source src="video.mp4" type="video/mp4"></video></body></html>');
  setTimeout(function(){newwindow.close()},5000);
}
</script>
<button onclick="openpopup()">弹出视频</button>

ログイン後にコピー

上記のコードの「setTimeout」関数は、ポップアップウィンドウが5秒後に閉じられます。さらに時間が必要な場合は、「5000」をミリ秒単位の対応する時間に変更できます。

まとめ

この記事では、Dreamweaver で Javascript を使用してポップアップビデオを実現し、一定時間後に自動的に閉じる方法を紹介しました。このテクニックは、Web デザインでユーザーエクスペリエンスをより豊かで快適なものにするのに非常に役立ちます。他の効果を試したい場合は、ポップアップウィンドウに HTML 要素とスタイルを追加して、よりインタラクティブな効果を実現できます。

以上がDreamweaver を使用してビデオをポップアップし、自動的に閉じる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。