jquery 加载视频

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。视频加载通常涉及到 HTML5 的 <video> 标签，jQuery 可以用来操作这些标签，实现视频的动态加载和控制。

类型

静态加载：视频在页面加载时就加载完毕。
动态加载：视频在用户触发某个事件（如点击按钮）时才加载。

应用场景

视频播放器：创建一个自定义的视频播放器，使用 jQuery 控制视频的播放、暂停、音量调节等。
视频广告：在视频播放前或播放过程中插入广告，使用 jQuery 控制广告的显示和隐藏。
视频列表：展示多个视频，用户点击某个视频时才加载该视频。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 动态加载视频：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 加载视频</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="loadVideoBtn">加载视频</button>
    <div id="videoContainer"></div>

    <script>
        $(document).ready(function() {
            $('#loadVideoBtn').click(function() {
                // 创建 video 标签
                var video = $('<video controls><source src="your-video-file.mp4" type="video/mp4"></video>');
                // 将 video 标签添加到容器中
                $('#videoContainer').html(video);
            });
        });
    </script>
</body>
</html>