Question

我试图创建一个带有视频精灵的小项目，模仿this JSFiddle for audio sprites。

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

然而，现在，我想在按下按钮或按下按键时合并一些可以使视频以全屏（或全窗口）播放的内容。演示here, for example显示了一种方法，如果您在视频播放时单击 Enter ，它将进入全屏模式。

我对JavaScript并不是特别有经验，因此解决方案可能会让我直截了当地了解如何整合Mozilla文章中显示的方法，但我很难过

这就是我现在所拥有的，正如预期的那样创建视频精灵：

＆＃13;

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();
  }
};

＆＃13;

<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>

＆＃13;

有关如何将其扩展为全屏或完整窗口的任何提示都将非常感谢！

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的答案有什么不同？

我的回答

切换功能
不会重置视频
没有优化（我认为你不想改变你的代码）

@ cviejo的回答

优化您的代码

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

<强>结论

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

Codepen

全屏视频精灵

1 个答案: