即使未在javascript上调用视频，视频也会播放_Javascript_Html_Video

即使未在javascript上调用视频，视频也会播放

javascript html video

即使未在javascript上调用视频，视频也会播放,javascript,html,video,Javascript,Html,Video,我有几个视频被命令在按下特定键时播放（每个视频都指定了特定键）。它工作得非常好，只是有时候当页面打开后第一次按下某个键（任意键）时，所有视频都会同时播放（应该只有一个）。我认为在页面打开后过早按下某个键时会发生这种情况。可能是装载问题另一个较小的问题是，有时在视频播放结束后，最后一帧不会消失在屏幕上。这并不经常发生，也不总是相同的视频我是新的编码和任何帮助将不胜感激。谢谢大家! HTML: autoplay=“true”您告诉视频的用户使用autoplay属性随时播放视频。浏览器对视频的自动

我有几个视频被命令在按下特定键时播放（每个视频都指定了特定键）。它工作得非常好，只是有时候当页面打开后第一次按下某个键（任意键）时，所有视频都会同时播放（应该只有一个）。我认为在页面打开后过早按下某个键时会发生这种情况。可能是装载问题

另一个较小的问题是，有时在视频播放结束后，最后一帧不会消失在屏幕上。这并不经常发生，也不总是相同的视频

我是新的编码和任何帮助将不胜感激。谢谢大家!

HTML:

autoplay=“true”您告诉视频的用户使用

autoplay

属性随时播放视频。浏览器对视频的自动播放非常严格，有时在播放之前需要用户输入。这可能是所有视频同时播放的原因。离题：我注意到您正在逐个选择所有视频。但您可以通过选择所有视频并在其上循环来创建

视频

对象，从而大大简化此过程。@EmielZuurbier感谢您提供的信息。你知道我有什么办法可以解决这个问题吗？（谢谢你的离题提示！）@sinsake没用。谢谢你！尝试删除该属性。

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

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