自动全屏html5视频播放？

问题描述：

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

答

这应该工作：

与自动播放属性
然后用JavaScript 1个视频标签创建一个空的html页面创建的所有路径要播放视频的数组
附加功能的视频标签
的福里面的“结束”事件nction生成一个随机指数Math.floor(Math.random() * clipPaths.length);
与所生成的索引从阵列
设定的路径作为视频标签

你只需要的“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

Yess !!!非常感谢Shy！你是上帝！我今天晚上会播放视频......我的孩子们会很开心！ –

自动全屏html5视频播放？

相关推荐