如果之前是全屏的，如何全屏打开html 5视频

Question

我正在观看按播放列表组织的网站上的一系列视频。每个视频长约 2 分钟。

网站使用 HTML 5 视频播放器，支持自动播放。也就是每次一个视频结束，下一个视频就会被加载并自动播放，这很棒。

但是，使用全屏，即使我之前全屏播放了一个视频，当播放列表中加载下一个视频时，屏幕会恢复正常，我必须再次单击全屏按钮....

我尝试使用 Tampermonkey 编写一个简单的 javascript 扩展来自动全屏加载视频。

$(document).ready(function() {
  function makefull() {
    var vid = $('video')[0]
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }

    //var vid = $('button.vjs-fullscreen-control').click();

  }

  makefull()

但我收到此错误：

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

每播放 2 分钟的视频就必须手动点击全屏，这非常烦人。有没有办法可以在我自己的浏览器中实现这一点？我正在使用 Chrome。

Answer 1

如果您可以获得 URL 列表，那么您可以创建自己的播放列表。无法在跨域<iframe> 中准确测试代码，例如在plnkr.co。代码可以在consoledocument 进行测试。要测试代码，您可以在MediaFragmentRecorder 处使用变量urls，并将"pause" 事件替换为"ended" 事件.addEventListener()。

如果您无法控制网站上使用的 HTML 或 JavaScript，则不确定如何提供任何能够解决查询的代码。

    const video = document.createElement("video");
    video.controls = true;
    video.autoplay = true;
    const urls = [
      {
        src: "/path/to/video/"
      }, {
        src: "/path/to/video/"
      }
    ];

    (async() => {

      try {
        video.requestFullscreen = video.requestFullscreen 
                            || video.mozRequestFullscreen 
                            || video.webkitRequestFullscreen;
        let fullScreen = await video.requestFullscreen().catch(e => {throw e});
        console.log(fullScreen);
      } catch (e) {
          console.error(e.message)
      }

      for (const {src} of urls) {                             
        await new Promise(resolve => {
          video.addEventListener("canplay", e => {
            video.load();
            video.play();
          }, {
            once: true
          });

          video.addEventListener("ended", resolve, {
            once: true
          });
          video.src = src;
        });

      }
    })();