javascript - html 5 video to automatically open in fullscreen mode when user enter the current webpage -
- first,i create webpage,and in page has button linked html5 video player page(this page)
- 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
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
Post a Comment