Comment utiliser Dreamweaver pour afficher une vidéo et la fermer automatiquement-Questions et réponses frontales-php.cn

Comment utiliser Dreamweaver pour afficher une vidéo et la fermer automatiquement

PHPz

Libérer： 2023-04-25 17:48:55

original

838 Les gens l'ont consulté

La fermeture automatique des vidéos contextuelles Javascript dans Dreamweaver est une technique très utile pour l'interaction avec les pages Web. En utilisant le langage de script Javascript de Dreamweaver, nous pouvons ouvrir une petite fenêtre et la fermer automatiquement après un certain temps. Cette technique est souvent utilisée dans la conception Web, comme les invites de connexion des utilisateurs, la promotion d'événements, la publicité, etc. Cet article explique comment utiliser Dreamweaver pour afficher une vidéo et la fermer automatiquement.

Étape 1 : Créez une vidéo contextuelle

Créez un nouveau document HTML dans Dreamweaver et ajoutez une balise "vidéo". Ajoutez le lien URL du fichier vidéo dans la balise "video":

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

Copier après la connexion

Il est à noter que l'attribut "src" dans le code ci-dessus précise l'adresse du lien URL du fichier vidéo, et l'attribut "type" précise le format du fichier vidéo. Si votre format vidéo n'est pas "mp4", vous devez modifier l'attribut "type" au format correspondant.

Étape 2 : Créer une fenêtre contextuelle

Créez un nouveau document HTML dans Dreamweaver et ajoutez un bouton. Ajoutez le code suivant dans l'événement "onclick" du bouton :

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

Copier après la connexion

Dans le code ci-dessus, la fonction "openpopup()" est utilisée pour créer une nouvelle fenêtre et ajouter une balise vidéo à la fenêtre. Le lien URL de la vidéo est le même que le lien vidéo créé lors de la première étape. Dans "newwindow", nous pouvons également ajouter d'autres éléments HTML pour obtenir un style de fenêtre pop-up plus riche.

Étape 3 : Fermer automatiquement la fenêtre pop-up

Afin de fermer automatiquement la fenêtre pop-up, nous pouvons utiliser la fonction "setTimeout" de Javascript. Cette fonction permet d'exécuter un morceau de code après un certain temps. Nous pouvons l'utiliser en conjonction avec la fonction "window.close()" pour fermer automatiquement la fenêtre pop-up :

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

Copier après la connexion

La fonction "setTimeout" dans le code ci-dessus spécifie que la fenêtre pop-up sera fermée après 5 secondes . Si vous avez besoin de plus de temps, vous pouvez modifier « 5000 » par le temps correspondant en millisecondes.

Résumé

Dans cet article, nous avons présenté comment utiliser Javascript dans Dreamweaver pour implémenter une vidéo contextuelle et la fermer automatiquement après une certaine période de temps. Cette technique est très utile dans la conception Web et peut rendre l’expérience utilisateur plus riche et plus confortable. Si vous souhaitez essayer d'autres effets, vous pouvez ajouter davantage d'éléments et de styles HTML à la fenêtre contextuelle pour obtenir des effets plus interactifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!