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

Question

如何在全屏尺寸上操作按钮，以便更改视频来源？ 目标是制作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语句。任何人都知道如何调用图片中指示的全屏功能并将其用作我的条件声明？

Answer 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";
    }
}