📌  相关文章
📜  使用 jquery 创建视频播放列表 - Javascript (1)

📅  最后修改于: 2023-12-03 14:49:42.021000             🧑  作者: Mango

使用 jQuery 创建视频播放列表 - Javascript

介绍

jQuery 是一个流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画等操作。在 Web 开发中非常常用，可以加速开发的效率，并提供跨浏览器的兼容性。在本文中，我们将介绍如何使用 jQuery 创建视频播放列表。

准备工作

在开始之前，你需要保证以下几点：

  • 你已经安装了 jQuery，你可以从 官网 或者通过引入 CDN 进行获取。
  • 你已经拥有自己的视频资源，并将其上传至服务器或者使用其他在线视频。
创建视频播放列表
HTML

首先，我们需要在 HTML 文件中添加一个播放列表容器 div，以及一个用于展示视频的 video 标签。将以下代码添加到 HTML 文件中：

<div id="playlist">
  <h2>播放列表</h2>
  <ul></ul>
</div>

<video id="player" controls>
  <source src="video1.mp4" type="video/mp4">
</video>

以上代码中，#playlist 包含了一个 ul 列表，我们将在 jQuery 中向其中添加视频项。#player 是用于展示视频的标签，其中的 src 属性可以被修改为新的视频地址。

jQuery

接下来，我们创建一个 JavaScript 文件，并在其中添加以下代码：

$(document).ready(function () {
  var playlist = [{
      title: "视频1",
      videoSrc: "video1.mp4"
    },
    {
      title: "视频2",
      videoSrc: "video2.mp4"
    },
    {
      title: "视频3",
      videoSrc: "video3.mp4"
    },
  ];

  var $playlist = $("#playlist ul");

  for (var i = 0; i < playlist.length; i++) {
      var title = playlist[i].title;
      var videoSrc = playlist[i].videoSrc;
      var $item = $("<li/>");
      var $link = $("<a/>");
      $link.attr("href", videoSrc);
      $link.append(title);
      $item.append($link);
      $playlist.append($item);
  }

  var player = $("#player");
  var $links = $playlist.find("a");

  $links.click(function (event) {
      event.preventDefault();
      var videoSrc = $(this).attr("href");
      player.attr("src", videoSrc);
      player.get(0).play();
  });

});

以上代码将 jQuery 的 ready 方法绑定在文档载入后，创建了一个播放列表数组 playlist，在 #playlist ul 中添加了视频项列表。
当点击列表中的一个视频项时，会修改 video 标签的 src 属性并启动播放。

解释

以上代码中，我们用到了以下 jQuery 方法：

$(document).ready()

该方法在文档载入并解析后立即执行包含的函数，用于绑定事件、修改 DOM 等任务。注意，此方法必须容纳在 script 标签内部。

$("#id")

该方法选取文档中指定 id 属性的元素，可以使用多种选择器，如 .class 选择器、$("ul > li") 等。

$("<li/>") 和 $("<a/>")

该方法获取包裹在尖括号内的标签名并创建一个新的 DOM 元素，可以使用 .attr() 方法改变属性值，同时使用 .append() 将新标签添加至现有标签的子元素中。

event.preventDefault()

当事件被触发时，该方法会取消事件的默认行为，如取消链接跳转、取消表单提交等。

$(this) 和 .attr("href")

这里 this 表示当前被点击的元素，使用 jQuery 的 .attr() 方法获取其 href 属性的值。

player.attr("src") 和 player.get(0).play()

该方法可以修改 video 标签的 src 属性和启动播放，get(0) 方法返回索引为 0 的 DOM 元素，即 video 标签本身，相当于 player[0]。

总结

本文介绍了如何使用 jQuery 创建视频播放列表，我们首先在 HTML 中创建了播放列表容器和用于展示视频的标签，然后使用 jQuery 创建视频项，最后为每个视频项绑定了点击事件，在播放列表中点击后，修改了 video 标签的 src 属性和启动播放。

以上是本文的全部内容，希望可以帮助你学习 jQuery。完整代码如下所示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 创建视频播放列表</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>

<div id="playlist">
  <h2>播放列表</h2>
  <ul></ul>
</div>

<video id="player" controls>
  <source src="video1.mp4" type="video/mp4">
</video>

<script>
  $(document).ready(function () {
    var playlist = [{
        title: "视频1",
        videoSrc: "video1.mp4"
      },
      {
        title: "视频2",
        videoSrc: "video2.mp4"
      },
      {
        title: "视频3",
        videoSrc: "video3.mp4"
      },
    ];

    var $playlist = $("#playlist ul");

    for (var i = 0; i < playlist.length; i++) {
        var title = playlist[i].title;
        var videoSrc = playlist[i].videoSrc;
        var $item = $("<li/>");
        var $link = $("<a/>");
        $link.attr("href", videoSrc);
        $link.append(title);
        $item.append($link);
        $playlist.append($item);
    }

    var player = $("#player");
    var $links = $playlist.find("a");

    $links.click(function (event) {
        event.preventDefault();
        var videoSrc = $(this).attr("href");
        player.attr("src", videoSrc);
        player.get(0).play();
    });

  });
</script>

</body>
</html>