CODEWITHSUNDEEP
javascripthtmlios
Sherlly Zhang
Sherlly Zhang

Reputation: 5

html 5 video to automatically open in fullscreen mode when user enter the current webpage

  1. first，I create a webpage,and in this page has a button linked to the html5 video player page(this is another page)
  2. and then, I want to achieve that when click the button, the next page(html5 video player page)can automatic full screen.

    I want it to run in IPhone

I try it use the code

window.load=function(){
 myVideo=document.getElementById('video')[0];
 if(!myVideo.webkitDisplayingFullscreen){
    goFullscreen();
 }
 function goFullScreen(){ myVideo.webkitEnterFullscreen();}
}

and the chrome said: Uncaught InvalidStateError:Failed to execute'webkitEnterFullscreen' on 'HTMLVideoElement': This element may only enter fullscreen mode in response to a user gesture

so is there some other solutions to get the fullscreen mode automatically??

Upvotes: 0

Views: 1496

Answers (1)

user3632930
user3632930

Reputation: 311

you can do a video as background of your page like my example, check the fiddle

http://jsfiddle.net/N4Lbp/4/

fullscreen: https://jsfiddle.net/N4Lbp/4/embedded/result/

HTML:

<video autoplay loop poster="http://peach.blender.org/wp-content/uploads/bbb-splash.png" id="video_bg">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_720p_stereo.ogg" type="video/ogg">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>

CSS:

*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html, body {
    height: 100%;
}
#video_bg {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -100;
    background: url(http://peach.blender.org/wp-content/uploads/bbb-splash.png) no-repeat;
    background-size: cover;
}

Upvotes: 1

Related Questions