自动全屏html5视频播放？答案

【问题标题】：Automatic fullscreen html5 video playback?自动全屏html5视频播放？
【发布时间】：2016-01-13 21:11:21
【问题描述】：

我有两个小孩（3 岁和 4 岁），他们喜欢整天在平板电脑/台式机上看卡通片。所以我在服务器上上传了大量的漫画。有没有办法，当他们点击/单击链接时，我上传的卡通片会从随机视频以全屏模式开始，以随机顺序和循环播放？！我对html5编码不太熟悉，所以我求你给我一个最简单的代码，以便在他们打开页面时自动全屏播放视频...... 多多多谢提前！！！

【问题讨论】：

标签： javascript android html video

【解决方案1】：

这应该可行：

用 1 个带有自动播放属性的视频标签创建一个空的 html 页面
然后使用 JavaScript 创建一个包含您要播放的视频的所有路径的数组
将函数附加到视频标签的“结束”事件
在函数内部生成随机索引Math.floor(Math.random() * clipPaths.length);
用生成的索引从数组中获取随机路径
将路径设置为video标签的'src'属性

您只需将所有路径放入 clipPaths 数组中...

 <!DOCTYPE html>
<html>
<head>
  <style>
  video#myVideo { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    background-size: cover; 
}
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<video id="myVideo" controls autoplay>

</video>
  <script>
    clipPaths = [
      'https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv',
      'http://techslides.com/demos/sample-videos/small.mp4',
      'http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4'

    ];
    var myVideo = document.getElementById('myVideo');
    myVideo.addEventListener('ended',myHandler,false);

    function myHandler(e) {
      var randClip = clipPaths[Math.floor(Math.random() * clipPaths.length)];
      myVideo.setAttribute('src',randClip);
    }
    var randClip = clipPaths[Math.floor(Math.random() * clipPaths.length)];

    myVideo.setAttribute('src',randClip);


  </script>
  </body>
</html>

链接到工作示例link

【讨论】：

是的！！！非常感谢害羞！你是神！！！我今晚会放视频...我的孩子会很开心！