ホームページ > 記事 > ウェブフロントエンド > Dreamweaver を使用してビデオをポップアップし、自動的に閉じる方法
Dreamweaver を使用してビデオをポップアップし、自動的に閉じる方法
- PHPzオリジナル
- 2023-04-25 17:29:00808ブラウズ
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 サイトの他の関連記事を参照してください。