如何在 JavaScript 中操作全屏按钮？答案

【问题标题】：How can I manipulate the full-screen button in JavaScript?如何在 JavaScript 中操作全屏按钮？
【发布时间】：2016-12-21 21:11:31
【问题描述】：

如何操作全屏尺寸的按钮，以便更改视频的来源？目标是制作 2 个视频，一个裁剪的视频和一个全尺寸的视频。当视频不是全屏（自定义命令）时，它将显示裁剪后的视频，当它是全屏时（默认 HTML5 命令），它将源更改为全尺寸视频。问题是当我点击这个按钮时：

来源不会改变。这是相关代码：

var video = document.getElementById("video1");
function fullScreen(){
     if (!document.webkitFullScreen){
        if (video.webkitRequestFullScreen) 
           video.src = "video1.mp4";
     } else {
        if (document.webkitCancelFullScreen())
           video.src = "video2.mp4";

所以代码的第一位有效。全屏时，视频的来源会改变。但是在退出全屏时，视频的来源保持不变。我想这可能是因为我没有点击我用来进入全屏的同一个按钮，所以它不会进入 else 语句。有谁知道如何调用图中所示的全屏函数并将其用作我的条件语句？

【问题讨论】：

标签： javascript html video

【解决方案1】：

您要做的是跟踪模式更改时触发的事件。目前这并不完全简单，因为似乎存在三个特定于浏览器的事件，但是这段代码可以让您跟踪正在发生的事情：

document.addEventListener('webkitfullscreenchange', tog, false);
document.addEventListener('fullscreenchange', tog, false);
document.addEventListener('mozfullscreenchange', tog, false);
document.addEventListener('MSFullscreenChange', tog, false);

function tog(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now react to the event
    console.log('Event: ' + event); 

    if (event == "FullscreenOn") {
        video.src = "video1.mp4";
    } else {
        video.src = "video2.mp4";
    }
}

【讨论】：