javascript - HTML5 Video onStart Fullscreen -
is possible set video full screen on page load?
so far, answer work , logical me setting width , height on element via css.
var $pop = popcorn("#video"); $pop.play(); console.dir( $pop )
html{font-family:arial;} #video{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> <video height="180" width="300" id="video" controls> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source> </video>
i use popcorn.js playing video on startup.
i aware of setting css classes javascript. thing i'm more interested in question: there javascript based method call, maximize video full screen (on startup).
using javascript, suggested will, can't seem work properly
var video = $("#video"); var vid = video[0]; vid.play(); if (vid.requestfullscreen) { vid.requestfullscreen(); } else if (vid.mozrequestfullscreen) { vid.mozrequestfullscreen(); } else if (vid.webkitrequestfullscreen) { vid.webkitrequestfullscreen(); }
html{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> <video height="180" width="300" id="video" controls> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source> </video>
Comments
Post a Comment