全屏视频精灵

Question

我正在尝试创建一个带有视频精灵的小项目,模仿这个JSFiddle后面的音频精灵.

播放按预期工作:单击相关按钮可播放视频的相关部分.

但是,现在,我想在按下按钮或按下按键时合并一些可以使视频以全屏(或全窗口)播放的内容.例如,这里的演示显示了一种方法,如果您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中存在的代码并将其修改为切换全屏，这意味着当按 Enter 时，视频可以全屏（如果不是），然后反转。

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 时，它会重新启动视频。为什么？？

当您单击按钮（您专注于该按钮）时，视频将全屏显示，当您再次按 Enter 时，视频将从全屏模式退出，然后焦点元素（已单击的按钮）再次单击，以便重新启动视频。

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

您只需要调用blur()函数即可从元素上移除焦点。

超文本标记语言

<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 的代码结合起来以获得更好的结果。

代码笔