jquery show hidden video

In the era of rapid development of the Internet, video has become an indispensable part of people's daily lives. In the construction of websites, if videos are to be used as display elements, how to elegantly realize the dynamic display and hiding of videos is particularly important.

In this article, I will share with you how to use jQuery to display and hide videos.

The first step is to introduce the jQuery library file

To use jQuery, you first need to introduce the jQuery library file into the web page.

If you do not use jQuery in your project, you can download the jQuery library file from jQuery's official website https://jquery.com/.

Add the following code in the 93f0f5c25f18dab9d176bd4f6de5d30e tag:

<script src="path/to/jquery.min.js"></script>

Change path/to/jquery.min.js to the file path you actually downloaded.

The second step is to realize the function of showing and hiding the video

Next, we will use jQuery to realize the effect of showing and hiding the video. The specific implementation is as follows:

1. HTML code

In the HTML code, we need to add a container (div) for displaying the video and add a video in it Tags, and buttons to click to show/hide the video.

The specific code is as follows:

<div class="video-container">
    <button class="show-video">显示视频</button>
    <video src="path/to/video.mp4"></video>
</div>

Among them, the src attribute in the video tag is the path of the video file, which can be modified according to the actual situation.

2. CSS code

Next, we need to add some basic styles to the video container and video so that they can be displayed on the web page.

The specific code is as follows:

.video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.show-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border: 1px solid #333;
    outline: none;
}

Among them, .video-container is the class name of the video container, and .show-video is the class name of the button to show/hide the video. The specific style can be modified according to the actual situation.

3. jQuery code

Finally, jQuery is used to achieve the effect of showing and hiding videos. We first need to select the button to show/hide the video and add a click event to it.

The specific code is as follows:

$('.show-video').click(function() {
    $(this).siblings('video').toggle();
});

Among them, $ represents the selected element, .show-video represents the selected element with the class name show-video, and .siblings('video') represents the selected element. For all video elements in the sibling elements, .toggle() means to switch the display and hidden state of the element.

When we click the button, jQuery will find the video element in the button's sibling elements, and then switch its display and hidden state. This achieves the effect of clicking the button to show/hide the video.

The complete jQuery code is as follows:

$(function() {
    $('.show-video').click(function() {
        $(this).siblings('video').toggle();
    });
});

The third step, summary

Through the above steps, we successfully used jQuery to dynamically display and hide videos. Just add a simple click event to allow users to choose whether to view the video.

Of course, in actual applications, we can also add more effects and interactions to improve the user experience. For example: when the video is playing, you can add functions such as progress bar and full-screen playback, and add loading animation when the video is loading, etc.

I believe that through studying this article, readers have mastered the basic methods of displaying and hiding videos in jQuery, and hope to practice and improve them in actual projects.

The above is the detailed content of jquery show hidden video. For more information, please follow other related articles on the PHP Chinese website!