How to stop a HTML5 video player when it enters the full screen mode on iOS / iPads?
Question
I am trying to figure out how to pause an html5 video player when it enter the full screen mode in Iphone and ipad using javascript.
it seems that when it enters the full screen it goes to the native player and javascript can no longer control the playback ?
<!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>
Note: the above code seems to work fine on Chrome and Ipad safari (non native player). >>> But it wont work on iphones (as it loads the native player automatic).
1 answers
solution1
0 2016-03-24 02:43:17
you timerStop function has a typos; You didn't call palyPuased function. It should be playPause();
function timerStop() {
setTimeout(function(){ playPause(); alert("PAUSED");}, 3000);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.