全屏视频精灵

我正在尝试创建一个带有视频小精灵的小项目，模仿这个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>

---

我使用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的回答有什么不同？

我的答案

切换功能

不会重置视频

不会优化（我认为你不喜欢改变你的代码）

@ cviejo的回答

优化您的代码

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

结论

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

Codepen

链接地址: http://www.djcxy.com/p/27475.html

上一篇: Full screen video sprites

下一篇: Increasing efficiency of barycentric coordinate calculation in python