So verwenden Sie Dreamweaver, um ein Video einzublenden und automatisch zu schließen-Front-End-Fragen und Antworten-php.cn

So verwenden Sie Dreamweaver, um ein Video einzublenden und automatisch zu schließen

PHPz

Freigeben： 2023-04-25 17:48:55

Original

774 Leute haben es durchsucht

Das automatische Schließen von Javascript-Popup-Videos in Dreamweaver ist eine sehr nützliche Technik für die Interaktion mit Webseiten. Durch die Verwendung der Javascript-Skriptsprache von Dreamweaver können wir ein kleines Fenster öffnen und es nach einer bestimmten Zeit automatisch schließen. Diese Technik wird häufig im Webdesign verwendet, z. B. bei Benutzeranmeldeaufforderungen, bei der Veranstaltungswerbung, in der Werbung usw. In diesem Artikel erfahren Sie, wie Sie mit Dreamweaver ein Video öffnen und automatisch schließen.

Schritt 1: Erstellen Sie ein Popup-Video.

Erstellen Sie ein neues HTML-Dokument in Dreamweaver und fügen Sie ein „Video“-Tag hinzu. Fügen Sie den URL-Link der Videodatei im Tag „video“ hinzu:

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

Nach dem Login kopieren

Es ist zu beachten, dass das Attribut „src“ im obigen Code die URL-Linkadresse der Videodatei angibt Das Attribut „type“ gibt das Format der Videodatei an. Wenn Ihr Videoformat nicht „mp4“ ist, müssen Sie das Attribut „type“ auf das entsprechende Format ändern.

Schritt 2: Erstellen Sie ein Popup-Fenster.

Erstellen Sie ein neues HTML-Dokument in Dreamweaver und fügen Sie eine Schaltfläche hinzu. Fügen Sie den folgenden Code im „onclick“-Ereignis der Schaltfläche hinzu:

<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>

Nach dem Login kopieren

Im obigen Code wird die Funktion „openpopup()“ verwendet, um ein neues Fenster zu erstellen und dem Fenster ein Video-Tag hinzuzufügen. Der URL-Link des Videos ist derselbe wie der im ersten Schritt erstellte Videolink. In „newwindow“ können wir auch andere HTML-Elemente hinzufügen, um einen umfassenderen Popup-Fensterstil zu erzielen.

Schritt 3: Popup-Fenster automatisch schließen

Um das Popup-Fenster automatisch zu schließen, können wir die Funktion „setTimeout“ von Javascript verwenden. Diese Funktion wird verwendet, um einen Codeabschnitt nach einer bestimmten Zeit auszuführen. Wir können es in Verbindung mit der Funktion „window.close()“ verwenden, um das Popup-Fenster automatisch zu schließen:

<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>

Nach dem Login kopieren

Die Funktion „setTimeout“ im obigen Code gibt an, dass das Popup-Fenster wird nach 5 Sekunden geschlossen. Wenn Sie mehr Zeit benötigen, können Sie „5000“ auf die entsprechende Zeit in Millisekunden ändern.

Zusammenfassung

In diesem Artikel stellen wir vor, wie Sie Javascript in Dreamweaver verwenden, um ein Popup-Video zu implementieren und es nach einer bestimmten Zeit automatisch zu schließen. Diese Technik ist im Webdesign sehr nützlich und kann das Benutzererlebnis reicher und komfortabler machen. Wenn Sie andere Effekte ausprobieren möchten, können Sie dem Popup-Fenster weitere HTML-Elemente und -Stile hinzufügen, um interaktivere Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Dreamweaver, um ein Video einzublenden und automatisch zu schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!