HTML 5 视频 - 无控制自动启动和自动重定向选项答案

【问题标题】：HTML 5 video - auto start with no control and auto redirection optionHTML 5 视频 - 无控制自动启动和自动重定向选项
【发布时间】：2014-04-18 08:20:21
【问题描述】：

1 - 我想在用户访问我的网站时自动启动我的视频。

2-虽然目前正在显示，但不需要任何控件，因为当我删除它们时，我的视频根本不会显示。

3-我可以显示加载条或任何加载图像，以便在加载范围内用户能够看到加载条，从而了解视频的存在。

下面是我的代码

<video class="video" id="myVideo" controls>
  <source src="images/UnlimitedTeamVideo.mp4" type="video/mp4">
  <source src="UnlimitedTeamVideo.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>


<script type="text/javascript">
  $(document).ready(function(){   
   $("#myVideo").bind('ended', function(){
      location.href="homepage.php";   
   }); 
  });
</script>

【问题讨论】：

标签： jquery video html5-video

【解决方案1】：

尝试：

<video class="video" id="myVideo" autoplay>

autoplay 属性应该自动让浏览器播放视频，如果浏览器支持其中一个来源并且能够缓冲它。

显示加载/进度条this answer may help。基本上它使用buffered 对象来显示视频的加载部分。

【讨论】：

【解决方案2】：

1 - 我想在用户访问我的网站时自动启动我的视频。

使用自动播放属性。有关有效 HTML5 视频属性的列表，请参阅 here。请注意，这不适用于 iOS 和 Android - 这是由 design 提供的。

2- 尽管当前正在显示，但不需要任何控件，因为当我删除它们时，我的视频根本不会显示。

您需要为 HTML5 视频标签指定宽度和高度才能使其按预期工作

3- 我可以显示加载条或任何加载图像，以便在加载范围内用户能够看到加载条，从而了解视频的存在。

是的，你可以。您的案例场景的想法是在文档准备好时显示加载栏，并在播放事件触发时将其删除。大家可以看看媒体元素事件列表here。

大家一起：

<video class="video" id="myVideo" width="640" height="360" autoplay>
  <source src="images/UnlimitedTeamVideo.mp4" type="video/mp4">
  <source src="UnlimitedTeamVideo.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>
<div id="loadingSpin">Loading...</div>
<script type="text/javascript">
$(document).ready(function(){  
    $("#loadingSpin").show(); 
    $("#myVideo").bind('play', function(){
        $("#loadingSpin").hide();
     });
    $("#myVideo").bind('ended', function(){
      location.href="homepage.php";   
     }); 
});
</script>

您需要使用 CSS 放置 loadingSpin 项目并设置样式，但我想您可以从这里获取它：)

【讨论】：