How to use Dreamweaver to pop up a video and automatically close it-Front-end Q&A-php.cn

How to use Dreamweaver to pop up a video and automatically close it

PHPz

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

Original

777 people have browsed it

The automatic closing of Javascript pop-up videos in Dreamweaver is a very useful technique for realizing web page interaction. By using Dreamweaver's Javascript scripting language, we can pop up a small window and close it automatically after a certain period of time. This technique is often used in web design, such as user login prompts, event promotion, advertising, etc. This article will introduce how to use Dreamweaver to pop up a video and automatically close it.

Step one: Create a pop-up video

Create a new HTML document in Dreamweaver, and then add a "video" tag. Add the URL link of the video file in the "video" tag:

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

Copy after login

It should be noted that the "src" attribute in the above code specifies the URL link address of the video file, and the "type" attribute specifies the video file format. If your video format is not "mp4", you need to modify the "type" attribute to the corresponding format.

Step 2: Create a pop-up window

Create a new HTML document in Dreamweaver, and then add a button. Add the following code in the button's "onclick" event:

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

Copy after login

In the above code, the "openpopup()" function is used to create a new window and add a video tag to the window. The URL link of the video is the same as the video link created in the first step. In "newwindow", we can also add other HTML elements to achieve a richer pop-up window style.

Step 3: Automatically close the pop-up window

In order to automatically close the pop-up window, we can use the "setTimeout" function of Javascript. This function is used to execute a piece of code after a certain amount of time. We can use it in conjunction with the "window.close()" function to automatically close the pop-up window:

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

Copy after login

The "setTimeout" function in the above code specifies that the pop-up window will be closed after 5 seconds. If you need more time, you can modify "5000" to the corresponding time in milliseconds.

Summary

In this article, we introduced how to use Javascript in Dreamweaver to realize a pop-up video and automatically close it after a certain period of time. This technique is very useful in web design and can make the user experience richer and more comfortable. If you want to try other effects, you can add more HTML elements and styles to the popup window to achieve more interactive effects.

The above is the detailed content of How to use Dreamweaver to pop up a video and automatically close it. For more information, please follow other related articles on the PHP Chinese website!