自动全屏html5视频播放？

Question

I have two little kids (3 & 4) and they like to watch cartoons all the day on their tablets/desktop. 我有两个小孩（3岁和4岁），他们喜欢整天在平板电脑/台式机上观看动画片。 So I've uploaded a ton of cartoons on a server. 因此，我已经在服务器上上传了大量的动画片。 Is there a way, when they tap/click on the link, the cartoons I've uploaded to start in full screen mode from a random video, in random order and looping?! 当他们点击/单击链接时，有没有办法让我上传的卡通从随机视频中以随机顺序和循环播放全屏模式开始！ I'm not too familiar with html5 coding, so i beg you to give me a simplest possible code for automated full screen video playback when they open the page... Many many many thanks in advance!!! 我对html5编码不太熟悉，所以请您在打开页面时给我一个最简单的代码，以进行自动全屏视频播放...非常感谢！

Answer 1

This should work: 这应该工作：

create an empty html page with 1 video tag with autoplay attribute 使用1个具有自动播放属性的视频标签创建一个空的html页面
then with JavaScript create an array of all the paths to the videos that you want to play 然后使用JavaScript创建要播放的视频的所有路径的数组
attach a function to the 'ended' event of the video tag 将功能附加到视频标签的“结束”事件
inside the function generate a random index Math.floor(Math.random() * clipPaths.length); 在函数内部生成随机索引Math.floor(Math.random() * clipPaths.length);
with the generated index get a random path from the array 使用生成的索引从数组中获取随机路径
set the path as the 'src' attribute of the video tag 将路径设置为视频代码的“ src”属性

You just need to put all the paths in the clipPaths array... 您只需要将所有路径放入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 to working example link 链接到工作示例链接

自动全屏html5视频播放？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-01-13 12:36:15

自动全屏html5视频播放？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-01-13 12:36:15

解决方案1
0 已采纳 2016-01-13 12:36:15