如何解决即使没有在 javascript 上调用视频也能播放
我有几个视频被命令在按下特定键时播放（每个视频都分配了一个特定的键）。它工作得很好，除了有时当页面打开后第一次按下一个键（任意键）时，所有视频同时播放（应该只是一个）。我认为这发生在页面打开后过早按下某个键时。可能是加载问题。
另一个较小的问题是，有时在视频播放完最后一帧后，屏幕不会消失。这种情况并不经常发生，也不总是相同的视频。
我是编码新手，任何帮助将不胜感激。谢谢！
HTML：
<body>
<div>
<a href="aboutpage.html">
<img id="about" src="videos/about.png" alt= "start"> </a>
</div>
<div id="letras">
<!--b1-->
<video id="b1" preload="auto" autoplay="true">
<source src="videos/b1.webm" type="video/webm">
Video not supported
</video>
<!--p1-->
<video id="p1" preload="auto" autoplay="true">
<source src="videos/p1.webm" type="video/webm">
Video not supported
</video>
<!--k1-->
<video id="k1" preload="auto" autoplay="true">
<source src="videos/k1.webm" type="video/webm">
Video not supported
</video>
<!--g1-->
<video id="g1" preload="auto" autoplay="true">
<source src="videos/g1.webm" type="video/webm">
Video not supported
</video>
<!--z1-->
<video id="z1" preload="auto" autoplay="true">
<source src="videos/z1.webm" type="video/webm">
Video not supported
</video>
<!--x1-->
<video id="x1" preload="auto" autoplay="true">
<source src="videos/x1.webm" type="video/webm">
Video not supported
</video>
<!--d1-->
<video id="d1" preload="auto" autoplay="true">
<source src="videos/d1.webm" type="video/webm">
Video not supported
</video>
<!--f1-->
<video id="f1" preload="auto" autoplay="true">
<source src="videos/f1.webm" type="video/webm">
Video not supported
</video>
<!--m1-->
<video id="m1" preload="auto" autoplay="true">
<source src="videos/m1.webm" type="video/webm">
Video not supported
</video>
<!--q1-->
<video id="q1" preload="auto" autoplay="true">
<source src="videos/q1.webm" type="video/webm">
Video not supported
</video>
<!--v1-->
<video id="v1" preload="auto" autoplay="true">
<source src="videos/v1.webm" type="video/webm">
Video not supported
</video>
<!--s1-->
<video id="s1" preload="auto" autoplay="true">
<source src="videos/s1.webm" type="video/webm">
Video not supported
</video>
<!--t1-->
<video id="t1" preload="auto" autoplay="true">
<source src="videos/t1.webm" type="video/webm">
Video not supported
</video>
<!--j1-->
<video id="j1" preload="auto" autoplay="true">
<source src="videos/j1.webm" type="video/webm">
Video not supported
</video>
<!--e1-->
<video id="e1" preload="auto" autoplay="true">
<source src="videos/e1.webm" type="video/webm">
Video not supported
</video>
<!--i1-->
<video id="i1" preload="auto" autoplay="true">
<source src="videos/i1.webm" type="video/webm">
Video not supported
</video>
<!--y1-->
<video id="y1" preload="auto" autoplay="true">
<source src="videos/y1.webm" type="video/webm">
Video not supported
</video>
<!--a1-->
<video id="a1" preload="auto" autoplay="true">
<source src="videos/a1.webm" type="video/webm">
Video not supported
</video>
<!--u1-->
<video id="u1" preload="auto" autoplay="true">
<source src="videos/u1.webm" type="video/webm">
Video not supported
</video>
<!--w1-->
<video id="w1" preload="auto" autoplay="true">
<source src="videos/W1.webm" type="video/webm">
Video not supported
</video>
<!--h1-->
<video id="h1" preload="auto" autoplay="true">
<source src="videos/h1.webm" type="video/webm">
Video not supported
</video>
<!--r1-->
<video id="r1" preload="auto" autoplay="true">
<source src="videos/r1.webm" type="video/webm">
Video not supported
</video>
<!--o1-->
<video id="o1" preload="auto" autoplay="true">
<source src="videos/o1.webm" type="video/webm">
Video not supported
</video>
<!--c1-->
<video id="c1" preload="auto" autoplay="true">
<source src="videos/c1.webm" type="video/webm">
Video not supported
</video>
<!--l1-->
<video id="l1" preload="auto" autoplay="true">
<source src="videos/l1.webm" type="video/webm">
Video not supported
</video>
<!--n1-->
<video id="n1" preload="auto" autoplay="true">
<source src="videos/n1.webm" type="video/webm">
Video not supported
</video>
</div>
<script src="animations.js" defer></script>
</body>
Java：
var videos = {
'b': document.getElementById('b1'),'p': document.getElementById('p1'),'k': document.getElementById('k1'),'g': document.getElementById('g1'),'z': document.getElementById('z1'),'x': document.getElementById('x1'),'d': document.getElementById('d1'),'f': document.getElementById('f1'),'m': document.getElementById('m1'),'q': document.getElementById('q1'),'v': document.getElementById('v1'),'s': document.getElementById('s1'),'t': document.getElementById('t1'),'j': document.getElementById('j1'),'e': document.getElementById('e1'),'i': document.getElementById('i1'),'y': document.getElementById('y1'),'a': document.getElementById('a1'),'u': document.getElementById('u1'),'w': document.getElementById('w1'),'h': document.getElementById('h1'),'r': document.getElementById('r1'),'o': document.getElementById('o1'),'c': document.getElementById('c1'),'l': document.getElementById('l1'),'n': document.getElementById('n1'),}
document.addEventListener('keypress',e => {
let video = videos[e.key];
if (video) {
video.play();
video.currentTime = 0;
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
