自动全屏html5视频播放? [英] Automatic fullscreen html5 video playback?
问题描述
我有两个小孩(3 岁和 4 岁)，他们喜欢整天在平板电脑/桌面上看卡通片.所以我在服务器上上传了大量漫画.有没有办法，当他们点击/单击链接时，我上传的漫画以全屏模式从随机视频开始，以随机顺序和循环播放?！我对html5编码不太熟悉，所以我求求你给我一个最简单的代码，当他们打开页面时自动全屏视频播放......在此先谢谢大家！！！
I have two little kids (3 & 4) and they like to watch cartoons all the day on their tablets/desktop. 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!!!
推荐答案
这应该有效:
创建一个带有 1 个带有自动播放属性的视频标签的空 html 页面
create an empty html page with 1 video tag with autoplay attribute
然后使用 JavaScript 创建一个包含您要播放的视频的所有路径的数组
then with JavaScript create an array of all the paths to the videos that you want to play
将函数附加到视频标签的结束"事件
attach a function to the 'ended' event of the video tag
在函数内部生成一个随机索引Math.floor(Math.random() * clipPaths.length);
inside the function generate a random index Math.floor(Math.random() * clipPaths.length);
使用生成的索引从数组中获取随机路径
with the generated index get a random path from the array
设置路径为视频标签的'src'属性
set the path as the 'src' attribute of the video tag
你只需要把所有的路径放在clipPaths数组中...
You just need to put all the paths in the clipPaths array...
<!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
这篇关于自动全屏html5视频播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
