1. 在HTML中打开视频时能否修改视频设置？ #

当然可以，但得看你怎么打开视频。如果像你现在这样用<a>标签直接跳转视频文件，浏览器会调用自带的原生播放器，这时候咱们的代码根本碰不到播放器的设置——毕竟这是浏览器自己的东西，咱们管不着。

要是想自定义视频的各种设置（比如控件样式、自动播放、全屏这些），得换成用HTML5的<video>标签来嵌入视频，而不是直接跳转视频文件。这样咱们就能通过代码完全控制视频的行为啦。

2. 如何实现点击图片跳转视频后，视频自动全屏显示并修改视频控件？ #

直接跳转视频文件肯定做不到，得换个思路：点击图片后，在当前页面（或者弹窗里）加载<video>元素，然后用JavaScript来控制它的播放、全屏和控件。下面给你一套具体的实现方案：

第一步：修改HTML结构

把原来的<a>标签换成可点击的图片，同时准备一个默认隐藏的<video>元素：

<div class="column">
  <!-- 点击这张图片触发视频播放，加cursor:pointer让鼠标变成手型 -->
  <img 
    src="../photo/Law Abiding.jpg" 
    alt="Law" 
    class="image" 
    style="width:80%; cursor:pointer;" 
    id="videoTrigger"
  >
  
  <!-- 默认隐藏的视频元素，后面点击图片后再显示 -->
  <video 
    id="customVideo" 
    style="display:none; width:100%;" 
    controls
  >
    <source src="../video/test.mp4" type="video/mp4">
    你的浏览器不支持HTML5视频播放功能
  </video>
</div>

第二步：添加JavaScript控制逻辑

用JS监听图片的点击事件，实现显示视频、自动播放、自动全屏，以及自定义控件：

// 获取图片和视频元素
const triggerImg = document.getElementById('videoTrigger');
const customVideo = document.getElementById('customVideo');

// 绑定点击事件
triggerImg.addEventListener('click', async () => {
  // 显示视频
  customVideo.style.display = 'block';

  try {
    // 先尝试播放视频（浏览器要求自动播放必须由用户交互触发，这里的点击就是合法的交互）
    await customVideo.play();

    // 尝试让视频全屏，兼容不同浏览器的API
    if (customVideo.requestFullscreen) {
      await customVideo.requestFullscreen();
    } else if (customVideo.webkitRequestFullscreen) { // 适配Chrome、Safari等webkit内核浏览器
      await customVideo.webkitRequestFullscreen();
    } else if (customVideo.msRequestFullscreen) { // 适配IE浏览器
      await customVideo.msRequestFullscreen();
    }
  } catch (err) {
    console.error('视频播放或全屏操作失败:', err);
  }

  // 自定义控件的话，可以去掉默认控件，自己实现
  // 比如隐藏默认控件：customVideo.removeAttribute('controls');
  // 然后用HTML/CSS做自己的播放按钮、进度条，再用JS绑定对应的播放/暂停/进度控制逻辑
});

关键细节说明

• 为什么不能用<a>跳转？因为跳转后是浏览器原生播放器，咱们没有权限修改它的设置，而用<video>嵌入的话，所有控制权都在咱们手里。
• 自动播放和全屏的限制：浏览器为了避免骚扰用户，要求这些操作必须由用户主动触发（比如点击事件内），所以不能在页面加载时自动执行，必须绑定在图片的点击操作里。
• 自定义控件：如果不想用浏览器默认的控件样式，就把<video>标签里的controls属性删掉，然后自己用HTML做按钮、进度条等元素，再用JS给这些元素绑定播放、暂停、拖动进度等事件。

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