如果以前是全屏的，如何打开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。代码可以在console在这个非常document进行测试。要测试代码，您可以在urls使用变量MediaFragmentRecorder，并在"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;
        });

      }
    })();