Question

当我通过Body onload="playVideo();"启动此功能时，视频结束后，网站上的所有内容都会消失，但背景视频除外。

我的功能（它开始随机视频）：

function playVideo() {
  var videos = [
    '1.mp4',
    'Lil Pump - _Gucci Gang_ (Official Music Video).mp4',
  ];
  var reloadCss = '<link rel="stylesheet" href="video.css"/>'
  var index = Math.floor(Math.random() * videos.length);
  var html = '<video autoplay="autoplay" preload="true" id="Background" onended="playVideo()"><source src="Videos/' + videos[index] + '" type="video/mp4"></video>';
  document.write(html);
  document.write(reloadCss);
}

Answer 1

您的网页正在替换为您使用document.write放置的视频html。

W3schools说的是关于document.write：

write（）方法将HTML表达式或JavaScript代码写入   文档。

write（）方法主要用于测试：如果在a之后使用它   HTML文档已完全加载，它将删除所有现有的HTML。

你可以使用jQuery append函数添加动态html，就像你想要做的那样。请参阅下面的代码段以获取快速示例。您的视频和脚本标记只显示为空格，但您可以看到append方法只是添加了html，而不是像建议的评论那样替换页面。：

如果您想使用vanilla javascript，也可以使用javascript appendChild() function。

＆＃13;

$(function(){
  //Run your playvideo function on page load
  playVideo();
})

function playVideo() {
  var videos = [
    '1.mp4',
    'Lil Pump - _Gucci Gang_ (Official Music Video).mp4',
  ];
  var reloadCss = '<link rel="stylesheet" href="video.css"/>'
  var index = Math.floor(Math.random() * videos.length);
  var html = '<video autoplay="autoplay" preload="true" id="Background" onended="playVideo()"><source src="Videos/' + videos[index] + '" type="video/mp4"></video>';
  
  //Use append rather than setting the document html to add
  //elements. Otherwise the whole page html will be replaced
  $content = $(".content");
  $content.append(html);
  $content.append(reloadCss);
  $content.append("<p>More content</p>");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div class="content">
        <p>Content</p>
    </div>
  </body>
</html>

＆＃13;

一切都在Javascript加载时消失

1 个答案: