如何使用JavaScript控制视频播放画质，自动设置为1080p？

答案是肯定的，但不同视频平台的实现逻辑差异很大——因为每个平台的视频播放器DOM结构、内部API都不相同。下面重点针对你提到的YouTube，以及通用HTML5视频场景给出实操方案，全程不需要你深入理解JS，照着做就行。

一、YouTube自动切换到1080p（Chrome/Firefox通用） #

YouTube没有公开的官方API直接设置默认画质，但可以通过浏览器用户脚本（比如Tampermonkey/Greasemonkey）实现自动切换，步骤如下：

1. 安装用户脚本管理器

   • Chrome：安装Tampermonkey扩展
   • Firefox：安装Greasemonkey扩展
     （都是浏览器应用商店里的免费工具，直接搜名字安装就行）

2. 创建新脚本
   打开脚本管理器，点击"创建新脚本"，把默认代码删掉，替换成下面的代码：

   // ==UserScript==
   // @name         YouTube Auto 1080p
   // @namespace    http://tampermonkey.net/
   // @version      0.1
   // @description  自动将YouTube视频设置为1080p播放
   // @author       You
   // @match        *://*.youtube.com/*
   // @grant        none
   // ==/UserScript==
   
   (function() {
       'use strict';
   
       // 等待播放器加载完成的函数
       function waitForPlayer() {
           const player = document.querySelector('video');
           if (!player) {
               // 没找到播放器就隔1秒再试
               setTimeout(waitForPlayer, 1000);
               return;
           }
   
           // 监听播放器加载完成事件
           player.addEventListener('loadedmetadata', () => {
               // 获取画质菜单按钮（YouTube的设置按钮）
               const settingsBtn = document.querySelector('button.ytp-settings-button');
               if (!settingsBtn) return;
   
               // 点击设置按钮打开菜单
               settingsBtn.click();
   
               // 等待画质选项加载
               setTimeout(() => {
                   // 找到画质选项的菜单入口
                   const qualityMenu = document.querySelector('div.ytp-menuitem:last-child');
                   if (!qualityMenu) return;
   
                   // 点击打开画质子菜单
                   qualityMenu.click();
   
                   // 等待画质列表加载
                   setTimeout(() => {
                       // 找到目标画质的选项并点击
                       const targetOption = Array.from(document.querySelectorAll('div.ytp-menuitem')).find(item => item.textContent.includes('1080p'));
                       if (targetOption) {
                           targetOption.click();
                           // 关闭设置菜单
                           settingsBtn.click();
                       }
                   }, 500);
               }, 500);
           });
   
           // 处理视频跳转（比如从首页点进视频）的情况
           const observer = new MutationObserver(() => {
               waitForPlayer();
           });
           observer.observe(document.body, { childList: true, subtree: true });
       }
   
       // 启动脚本
       waitForPlayer();
   })();
   

3. 保存并启用脚本
   保存后，刷新YouTube页面，新加载的视频就会自动切换到1080p了。如果想切换到其他画质，把代码里item.textContent.includes('1080p')里的"1080p"改成你想要的分辨率（比如"720p"）就行。

二、自己的HTML5视频控制画质 #

如果是你自己开发的HTML5视频页面，控制画质更简单，因为HTML5视频有原生API支持。假设你的视频代码是这样的：

<video id="myVideo" controls>
   <source src="video-480p.mp4" type="video/mp4" data-quality="480p">
   <source src="video-720p.mp4" type="video/mp4" data-quality="720p">
   <source src="video-1080p.mp4" type="video/mp4" data-quality="1080p">
</video>

你可以加一段简单的JS代码，页面加载时自动切换到1080p：

// 页面加载完成后执行
window.addEventListener('load', () => {
   const video = document.getElementById('myVideo');
   // 找到1080p的源文件
   const targetSource = document.querySelector('source[data-quality="1080p"]');
   if (targetSource) {
       // 切换视频源
       video.src = targetSource.src;
       // 重新加载并播放
       video.load();
       video.play();
   }
});

把这段代码放在HTML的<script>标签里，放在</body>之前就行。

注意事项 #

• 第三方平台（比如YouTube）的DOM结构可能会更新，脚本可能会失效，到时需要调整代码里的元素选择器（比如button.ytp-settings-button这类）
• 部分平台可能有限制机制，自动切换画质可能偶尔失效，刷新页面即可

内容的提问来源于stack exchange，提问作者manoj