Html5 Full screen video

前端未结

关注

 8  690

名媛妹妹 2020-11-30 01:38

Is there any way to do this? I wan to play video in full screen. Without browser. setting width:100%; height:100%; keep browser visible yet

8条回答

孤城傲影 (楼主)

2020-11-30 02:34

You can do it with jQuery.

I have my video and controls in their own

like this:



    

     

    

         

             
                 
             

             
                 Play
                 Vol
                 0:00 / 0:00
                 Full

And then my jQuery for the .fullscreen class is:

var fullscreen = 0;

$(".fullscreen").click(function(){
  if(fullscreen == 0){
    fullscreen = 1;
    $("video").appendTo('body');
    $("#vidControls").appendTo('body');
    $("video").css('position', 'absolute').css('width', '100%').css('height', '90%').css('margin', 0).css('margin-top', '5%').css('top', '0').css('left', '0').css('float', 'left').css('z-index', 600);
    $("#vidControls").css('position', 'absolute').css('bottom', '5%').css('width', '90%').css('backgroundColor', 'rgba(150, 150, 150, 0.5)').css('float', 'none').css('left', '5%').css('z-index', 700).css('-webkit-border-radius', '10px');

}
else
    {

        fullscreen = 0;

        $("video").appendTo('#videoPlayer');
        $("#vidControls").appendTo('#videoPlayer');

        //change

It needs a little cleaning up as I'm still working on it but that should work for most browsers as far as I can see.

Hope it helps!

0 讨论(0)

查看其它8个回答