0
Ich versuche herauszufinden, wie ein HTML5-Videoplayer zu pausieren, wenn es den Vollbildmodus in Iphone und iPad mit Javascript eingeben.Wie stoppe ich einen HTML5-Videoplayer, wenn er auf iOS/iPads in den Vollbildmodus wechselt?
es scheint, dass, wenn es den ganzen Bildschirm betritt geht es an den nativen Player und Javascript kann nicht mehr die Wiedergabe steuern?
<!doctype html>
<html>
<head>
<title>Simple JavaScript Controller</title>
<script type="text/javascript">
/*--------------------------------------------------*/
/* A Simple JavaScript Media Controller and Resizer */
function playPause() {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused){
myVideo.play();
}else{
myVideo.pause();
}
}
function makeBig() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.height = myVideo.videoHeight * 2;
}
function makeNormal() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.height = myVideo.videoHeight;
}
/*-------------------------------------------*/
/* Using DOM Events to Monitor Load Progress */
function getPercentProg() {
var myVideo = document.getElementsByTagName('video')[0];
var endBuf = myVideo.buffered.end(0);
var soFar = parseInt(((endBuf/myVideo.duration) * 100));
document.getElementById("loadStatus").innerHTML = soFar + '%';
}
function myAutoPlay() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.play();
}
function addMyListeners(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('progress', getPercentProg, false);
myVideo.addEventListener('canplaythrough', myAutoPlay, false);
}
/*----------------------------------------*/
/* Replacing a Media Source Sequentially */
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = "sample_iTunes.mov";
myVideo.load();
myVideo.play();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended', myNewSrc, false);
myVideo.addEventListener('progress', getPercentProg, false);
}
function timerStop() {
setTimeout(function(){ playPause(); alert("PAUSED");}, 3000);
}
</script>
</head>
<!--<body onload="addMyListeners()">-->
<body onload="myAddListener()">
<div class="video-player" align="center">
<video controls>
<!--<source src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" type="video/ogg">-->
<source src="sample_iPod.m4v">
Your browser does not support the <code>video</code> element.
</video>
<p id="loadStatus">...</p>
<p>
<a href="javascript:playPause(); timerStop();">Play/Pause</a> |
<a href="javascript:makeBig();">2x Size</a> |
<a href="javascript:makeNormal();">1x Size</a>
</p>
</div>
</body>
</html>
Hinweis: der obige Code scheint auf Chrome und Safari Ipad (nicht einheimischer Spieler) gut zu funktionieren. >>> Aber es funktioniert nicht auf iPhones (wie es den nativen Player automatisch lädt).
Verändert sich die Ausrichtung im Vollbildmodus? – Naga2Raja
nicht. Muß nur die Videowiedergabe im Vollbildmodus anhalten (nativer Modus). danke – Joolah