📜  youtube 跳过 - Javascript (1)

📅  最后修改于: 2023-12-03 15:35:49.279000             🧑  作者: Mango

Youtube 跳过 - Javascript

在 Youtube 观看视频的时候,经常会遇到不想看的部分,比如广告或者片头。此时我们可能会通过跳过按钮,直接跳过这些部分。有时我们也希望自动跳过这些部分,节省观看时间和提供更好的观看体验。在本文中,我们将介绍如何使用 Javascript 实现 Youtube 跳过功能。

Youtube 跳过的实现方式

实现 Youtube 跳过的方式有多种,包括浏览器的插件、用户脚本、JS脚本 等。在这里,我们将重点介绍如何通过 JS 脚本实现自动跳过Youtube 视频的片头和广告。

实现步骤

下面是实现自动跳过 Youtube 视频片头和广告的步骤:

1. 获取视频元素

在 Youtube 观看视频的页面,视频元素 selector 是 'video' 。通过Document对象的querySelector()方法 或getElementById()方法获取video元素。

const videoElement = document.querySelector('video')
2. 监听视频的时间变化

为video元素注册“ timeupdate” 事件。在事件处理程序中,检查视频是否处于片头或广告时间段,并根据需要跳过这些时间段。

videoElement.addEventListener('timeupdate', () => {
  // 获取当前的视频时间
  const currentTime = Math.floor(videoElement.currentTime)
  // 检查是否在广告时间段
  if (currentTime >= 5 && currentTime <= 15) {
    // 跳过广告
    videoElement.currentTime = 15
  }
  // 检查是否在片头时间段
  if (currentTime >= 0 && currentTime <= 10) {
    // 跳过片头
    videoElement.currentTime = 10
  }
})

在这个示例中,我们假设广告时间段的时间是5秒到15秒,片头时间段的时间是0秒到10秒。在实际应用中,你可以根据需要调整这些时间段。

3. 使用油猴脚本

现在,我们已经有了使用 JS 实现 Youtube 跳过的基本知识。但是,在每次观看Youtube 视频时手动运行JS代码是很麻烦的。 幸运的是,在浏览器中有一些插件可以自动运行JavascriptS代码。其中,油猴脚本是最流行的用户脚本之一,它可以让用户自定义网页并为其添加功能。 以下是一个简单的油猴脚本,可以实现自动跳过Youtube 视频的片头和广告:

// ==UserScript==
// @name        Youtube Skip Ads
// @namespace   Violentmonkey Scripts
// @match       https://www.youtube.com/*
// @grant       none
// ==/UserScript==

(function() {
  'use strict';
  // 获取视频元素
  const videoElement = document.querySelector('video')
  // 监听“timeupdate”事件,跳过片头和广告
  videoElement.addEventListener('timeupdate', () => {
    // 获取当前的视频时间
    const currentTime = Math.floor(videoElement.currentTime)
    // 检查是否在广告时间段
    if (currentTime >= 5 && currentTime <= 15) {
      // 跳过广告
      videoElement.currentTime = 15
    }
    // 检查是否在片头时间段
    if (currentTime >= 0 && currentTime <= 10) {
      // 跳过片头
      videoElement.currentTime = 10
    }
  })
})();

在油猴脚本中,我们将前面的JS代码包装在一个立即调用的函数表达式中,并使用'@match'指定适用网址规则。当你在浏览Youtube 视频页面时,这个脚本将自动运行,实现自动跳过功能。

总结

在本文中,我们介绍了使用Javascript实现Youtube自动跳过功能的步骤。本文的实现代码基于Javascript,可以应用于自己的网站或其他的在线视频网站观看体验的提升。