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

Posted 2023-03-07

【中文标题】如果之前是全屏的，如何全屏打开html 5视频

【英文标题】：how to open html 5 video fullscreen if it was fullscreen before

【发布时间】：2019-02-17 20:41:48

【问题描述】：

我正在观看按播放列表组织的网站上的一系列视频。每个视频长约 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。

【问题讨论】：

使用setTimeout的预期结果是什么？以编程方式执行.click() 不受信任，除非在用户操作在狭窄时间范围内分派的事件处理程序中触发，请参阅Trigger click on input=file on asynchronous ajax done()

@guest271314 我只是使用 setTimeout 来等待视频标签出现在页面上。是的，所以有解决方法吗？我不想一直点击。

如果setTimeout() 是实际使用的代码，为什么要从问题中删除？ “出现在页面上” 是什么意思？您可以创建一个 stacksn-ps 或 plnkr plnkr.co 来演示您尝试过的代码的问题吗？

@guest271314 setTimeout 在这里完全无关紧要。正如我所说，这只是确保视频元素出现在页面上的一种方式。问题是关于如何让视频自动全屏打开。

【参考方案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;
        );

      
    )();

【讨论】：

@siamii 另见How to use Blob URL, MediaSource or other methods to play concatenated Blobs of media fragments?

听起来很合理。我认为最好的选择是下载所有视频并离线全屏播放。我可以控制 Tampermonkey 并且有问题的网站是 coursera.org 。那么这段代码的作用是创建一个全屏播放列表的新视频播放器并播放urls列表中的所有视频？

@siamii "那么这段代码的作用是创建一个新的视频播放器，播放列表全屏并播放 urls 列表中的所有视频？" 是的。没有循环。一旦列表完成，即是程序的完成。如有必要，也可以在程序中包含循环。