禁用自动播放和使用HTML5视频显示控件

我有一个可以工作的HTML5视频，但是我遇到的问题是，无论何时我在浏览器中转到视频时，它都会立即开始播放。我如何禁用自动播放功能？我用autoplay="false"属性尝试过，但没有结果。禁用自动播放和使用HTML5视频显示控件

而且控件总是隐藏的，我必须右键单击并单击“显示控件”以使控件弹出。我也尝试启用此：showcontrols="true"，但也没有反应。

所有帮助表示赞赏。以下是我的代码

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>hls.js</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <style> 
      .hlsjs { 
       position: relative; 
       width: 70%; 
      } 
      .ratio { 
       position: absolute; 
       padding-top: 75%; 
      } 
      video { 
       background-color: #ccc; 
       width: 100%; 
      } 
     </style> 
     <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> 
     <script> 
      window.onload = function() { 
       if (Hls.isSupported()) { 
        var video1 = document.getElementById("video1"); 
        hls1 = new Hls({ 
         debug : true 
        }), hls1.on(Hls.Events.MEDIA_ATTACHED, function() { 
         hls1.loadSource("http://fdfasd.com/fdsa.m3u8"); 
        }); 
        hls1.attachMedia(video1); 
       } 
      }; 
     </script> 
    </head> 
    <body> 
     <h1>hls.js</h1> 
     <h2>First instance</h2> 
     <div class="hlsjs"> 
      <video id="video1" autoplay="false" showcontrols="true"></video> 
      <div class="ratio"></div> 
     </div> 
    </body> 
</html>

来源

2016-05-31 Sandeep Shah

我很确定，如果你指定'autoplay'属性，视频将自动播放，即使它是假的。在这里可以看到https://jsfiddle.net/whjLf2b6/ - 我认为'showcontrols'属性实际上应该是'controls'。 – evolutionxbox

如果您指定autoplay属性，视频将自动播放，即使它为假。可以在这里看到：

<video src="http://vjs.zencdn.net/v/oceans.mp4" autoplay="false"></video>

此外，showcontrols属性实际上应该是controls。

因此所需的HTML将是：

<video id="video1" controls></video>

来源：

来源

2016-05-31 11:01:41 evolutionxbox

你必须将其彻底删除。标签属性不采用布尔值，而是交换机本身。这将删除自动播放，但仍显示控件

<video 
 
    id="video1" 
 
    controls 
 
    src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"> 
 
</video>

来源

2016-05-31 11:02:16 torox

显示控件不是正确的属性名称。看我以前的答案。 – evolutionxbox

@evolutionxbox oops，从问题中复制原始代码。固定 – torox

事实上设置autoplay到false不利于某些视频播放反正。见this case in fiddle.

你可能想通过代码东西，如果你要暂停所有的视频线做：

videos = document.querySelectorAll("video"); 
for(video of videos) { 
    video.pause(); 
    video.controls = true 
}

当然如果video标签是在阴影上述情况下将无法正常工作根元素，但是几乎没有任何通用的解决方案可以与阴影根元素一起工作。在那里你需要一个自定义的方法并首先扩展阴影根。

来源

2018-02-08 13:32:04

禁用自动播放和使用HTML5视频显示控件

回答

相关问题