Question

我有两个html文件，一个是启动画面，另一个是主文件。

初始屏幕上有一个Go!按钮，因此单击会将用户重定向到主屏幕。

点击Go!按钮后，如何在主视频中播放视频？由于某些原因，我不能在主体上使用 autoplay 。

以下是启动画面代码：

function myFunction() {
    window.open("themes/default/main.html");
}

body {
  text-align: center;
}

<div class="popup" onclick="myFunction()" >
    <button>Go!</button>
</div>

还有一个简单的main.html代码：

<video muted loop id="myVideo">
  <source src="xmb.mp4" type="video/mp4">
</video>

Answer 1

尝试在视频代码中添加“控制自动播放”一词，如下所示。

<video muted loop id="myVideo" controls autoplay>
    <source src="xmb.mp4" type="video/mp4">
</video>

Answer 2

由于某些原因，我不能在主体中使用自动播放。

您可以在body.tag之前的main.html中使用此代码

<script>
 document.getElementById('myVideo').play();
</script>

或

<script>
 document.getElementById('myVideo').setAttribute("autoplay", "true");
</script>

另一种方法

仅当您从飞溅中打开时才播放视频。在url中传递参数，并在main.html中进行检查。

function myFunction() {
    window.open("themes/default/main.html?play=1");
}

在main.html

<script>
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

if (getUrlParameter('play' == '1') {
 document.getElementById('myVideo').play();
})
</script>

Answer 3

将初始屏幕代码功能更改为

function myFunction() {
 window.open("themes/default/main.html?s=autoplay");
}

并将您的main.html添加到

<script>
   var status = window.location.search.substring(3);
   if (status == 'autoplay')
   {
    var vid = document.getElementById('myVideo');
    vid.play();
   }
</script>

如何从主页的初始屏幕播放视频？

3 个答案: