javascript – 全屏视频精灵

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

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

解决方法

我使用 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()函数.

When I press enter it restarts the video. Why??

当您单击按钮(您关注该按钮)时,视频将全屏显示,当您再次按Enter键时,视频将从全屏模式退出,然后再次单击聚焦元素(已单击的按钮),以便重新启动该视频.

Now,I understand what happening. What is the solution?

您只需调用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
}

What is this?

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

What is different between your answer and @cviejo’s answer?

我的答案

>切换功能
>不重置视频
>不优化(我认为你不喜欢改变你的代码)

@ cviejo的回答

>优化您的代码

注意：我不想说@ cviejo的答案不好,因为他真的最小化你的代码.

结论

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

Codepen