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


  1. first,i create webpage,and in page has button linked html5 video player page(this page)
  2. and then, want achieve when click button, next page(html5 video player page)can automatic full screen.

    i want run in iphone

i try use code

window.load=function(){  myvideo=document.getelementbyid('video')[0];  if(!myvideo.webkitdisplayingfullscreen){     gofullscreen();  }  function gofullscreen(){ myvideo.webkitenterfullscreen();} } 

and chrome said: uncaught invalidstateerror:failed execute'webkitenterfullscreen' on 'htmlvideoelement': element may enter fullscreen mode in response user gesture

so there other solutions fullscreen mode automatically??

you can video background of page example, check 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; } 

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -