全屏视频精灵

Question

我正在尝试创建一个带有视频精灵的小项目，以this JSFiddle for audio sprites 为模型。

播放按预期工作：点击相关按钮播放视频的相关部分。

但是，现在，我想加入一些东西，当按下按钮或按下某个键时，可以使视频以全屏（或全窗口）播放。演示 here, for example 展示了一种方法，如果您在播放视频时单击 Enter，它将进入全屏模式。

我对 JavaScript 没有特别的经验，因此该解决方案很可能让我对如何集成 Mozilla 文章中显示的方法直言不讳，但我被难住了。

这是我现在所拥有的，它可以按预期创建视频精灵：

var videoSprite = document.getElementById('bbb');

// sprite data
var spriteData = {
  full: {
    start: 0,
    length: 595
  },
  tentotwenty: {
    start: 10,
    length: 10
  },
  tentothirty: {
    start: 10,
    length: 20
  },
  fiftytoonefifty: {
    start: 50,
    length: 200
  }
};

// current sprite being played
var currentSprite = {};

// time update handler to ensure we stop when a sprite is complete
var onTimeUpdate = function() {
  if (this.currentTime >= currentSprite.start + currentSprite.length) {
    this.pause();
  }
};
videoSprite.addEventListener('timeupdate', onTimeUpdate, false);

// in mobile Safari, the first time this is called will load the audio. Ideally, we'd load the audio file completely before doing this.
var playSprite = function(id) {
  if (spriteData[id] && spriteData[id].length) {
    currentSprite = spriteData[id];
    videoSprite.currentTime = currentSprite.start;
    videoSprite.play();
  }
};

<video id="bbb">
  <source src="https://ia700408.us.archive.org/26/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
</video>
<br />
<br />
<ul>
  <li>
    <button onclick="playSprite('full');">Play full video</button>
  </li>
  <li>
    <button onclick="playSprite('tentotwenty');">Play from 10 to 20 seconds</button>
  </li>
  <li>
    <button onclick="playSprite('tentothirty');">Play from 10 to thirty seconds</button>
  </li>
  <li>
    <button onclick="playSprite('fiftytoonefifty');">Play from 50 to 200 seconds</button>
  </li>
</ul>

任何关于如何将其扩展为全屏或全窗口的提示将不胜感激！

Answer 1

我使用MDN 中存在的代码并将其修改为切换全屏，这意味着当按下输入时视频可以全屏，如果不是，则反转。

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;      
  if (!state) {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

你只需要在按钮被点击时调用toggleFullScreen()函数。

当我按下回车键时，它会重新启动视频。为什么？？

当您单击按钮时（您将注意力集中在该按钮上），视频会全屏显示，当您再次按 enter 时，视频会退出全屏模式，然后是焦点元素（已点击的按钮）再次点击，重新开始播放视频。

现在，我明白发生了什么。解决办法是什么？

你只需要调用blur()函数来移除元素的焦点。

HTML

<button onclick="playSprite(this,'full');">Play full video</button>
<button onclick="playSprite(this,'tentotwenty');">Play from 10 to 20 seconds</button>
<button onclick="playSprite(this,'tentothirty');">Play from 10 to thirty seconds</button>
<button onclick="playSprite(this,'fiftytoonefifty');">Play from 50 to 200 seconds</button>

Javascript

function(currentElement,id) {
   currentElement.blur();
   //your code
}

this 是什么？

每次调用playSprite 函数(playSprite(this, YourdesireTime)) 时，当前点击的元素都会传递给函数以了解点击了哪个按钮并从点击的元素中移除焦点。

你的回答和@cviejo 的回答有什么不同？

我的回答

1. 具有切换功能
2. 不重置视频
3. 没有优化（我认为你不喜欢更改代码）

@cviejo 的回答

1. 优化您的代码

注意：我不想说@cviejo 的回答不好，因为他真的把你的代码最小化了。

结论

您可以结合我的代码和@cviejo 的代码以获得更好的结果。

Codepen