I have an old, first generation iPad that is almost useless and i'd like to transform it into a video player. I'm strugling to make a simple HTML5 video playlist page that i can load in Safari and have it play continuously. While it has no problems playing my MP4 video files individually, i cannot find a way to convince him to load and play the next video automatically.
To give a little bit more details, i want to have this iPad in the same local network with a NAS/webserver where my video files and this HTML file reside. The HTML file is index.html located at http://192.168.86.11/internal/ and all my video files are numbered files, in the same folder. The iPad will get the content through WiFi, since it doesn't have anything else.
I provide the source code at the end. In order to debug it a little, i've placed a DIV that i update with various texts. For starter, i just want to have 2 video files play in a loop, 441.mp4 and 1127.mp4. The first video plays fine (provided i start it manually), but the second one doesn't, no matter what i try. The order of events is the following:
- i load the HTML page in Safari; the debug shows me
loaded, video loaded and the video player shows me the play button, waiting to press it;
- i press the play button; the
can play text gets added to the debug and the video starts playing;
- the video finishes; the following gets added to the debug text:
finished, loading http://192.168.86.11/internal/1127.mp4, video loaded, however the next video does not start.
So, anyway, is there such thing even possible or am i chasing unicorns ? It's not very clear to me (after searching alot on the internet) whether this is actually possible or not (i've seen various discussions about video autoload/autoplay not working on mobile devices, especially Apple's; but after all, i do actually start the playing manually, on the first video, so i woulnd't place this in the 'autoplay' problem bucket).
And if it is possible, could anyone shed some light on what i'm not doing (right) here ?
Some more informations:
- the iPad model is A1219 (on the back cover), MB292LL (in the software), running iOS 5.1.1 (9B206) ... and this is the highest version i can have, it doesn't update to anything newer;
- the iPad has been resetted to factory defaults, so it has no possible flaws due to bad software installations / uninstallations / misconfigurations;
- all video files (and especially these 2) work perfectly alone, they have been converted with ffmpeg with a custom command especially to make them work with this iPad; individually (and manually), they play fine;
- any idea is welcomed, i could use any web library / solution, however i do prefer simpler solutions;
- i've read in another stackoverflow post that some Apple mobile products don't want to autoplay files larger than 3 MB; while this would be a problem for me, these 2 test files only have 1 MB, so this shouldn't be a problem here;
- everything works well and as expected on something else, like Android 6 + Chrome 87 (i don't even need to press anything, the autoplay actually works from start).
Thank you very much !
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
</head>
<body style="background: #000; margin: 0; position: relative;">
<div id="hDebug" style="color: #FFF; position: absolute; top: 0; left: 0; z-index: 999;">loaded</div>
<video autoplay muted playsinline controls style="width: 100%; position: absolute; bottom: 0;" id="hVideo">
<source src="" type="video/mp4" id="hVideoFile">
nope
</video>
<script type="text/javascript">
var arrPlaylist = [441, 1127];
var nCursor = 0;
var hVideo = document.getElementById('hVideo');
var hVideoFile = document.getElementById('hVideoFile');
var hDebug = document.getElementById('hDebug');
function VideoEnded()
{
hDebug.innerHTML = hDebug.innerHTML + ', finished';
nCursor++;
if (nCursor >= arrPlaylist.length) nCursor=0;
hVideoFile.src = 'http://192.168.86.11/internal/' + arrPlaylist[nCursor] + '.mp4';
hDebug.innerHTML = hDebug.innerHTML + ', loading http://192.168.86.11/internal/' + arrPlaylist[nCursor] + '.mp4';
hVideo.load();
}
function AutoPlay()
{
hDebug.innerHTML = hDebug.innerHTML + ', video loaded';
hVideo.play();
}
function CanPlay()
{
hDebug.innerHTML = hDebug.innerHTML + ', can play';
hVideo.play();
}
// load the first file
hVideo.addEventListener('ended', VideoEnded);
hVideo.addEventListener('loadstart', AutoPlay);
hVideo.addEventListener('canplaythrough', CanPlay);
hVideoFile.src = 'http://192.168.86.11/internal/' + arrPlaylist[nCursor] + '.mp4';
hVideo.load();
// bottom align the player
var hBody = document.getElementsByTagName("BODY")[0];
hBody.style.height = window.innerHeight + 'px';
</script>
</body>
</html>
question from:
https://stackoverflow.com/questions/66052079/simple-html5-video-playlist-on-ipad 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
