7227

Safari html5 video fullscreen size

<h3>Question</h3>

On OSX Safari, HTML5 video tag when clicking on fullscreen. How can I force the video to cover the full screen instead of showing a small (maybe the original) size with a black background?


<h3>Answer1:</h3>

Ok, found it. Need some CSS when a max-height is set. Answer:

video:-webkit-full-screen { width: 100%; height: 100%; max-height: 100%; }
<h3>Answer2:</h3>

As @Jack say we need to use the CSS -webkit-full-screen

I think you wanna have you're <em>own</em> customized controller right? In that case, we need to put the control panel and the video inside a div, and use the full-screen on that. Let's us just call it videoContainer

First we make the HTML

<div class="videoContainer"> <video id="video" allowfullscreen="allow"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

Your browser does not support the video tag.

</video> <!-- Control --> <div class="control"> <a class="play mediaplayer-play"></a> <a class="fullscreen mediaplayer-full-screen"></a> </div> </div>

CSS

.videoContainer:fullscreen, .videoContainer:-ms-fullscreen, .videoContainer:-moz-full-screen, .videoContainer:-webkit-full-screen { width: 100%; height: 100%; }

Sometimes it can be buggy <em>(bug in Safari)</em> so a way to fix that is to add a style to the default control.

video:-webkit-full-screen::-webkit-media-controls-panel, video:-webkit-full-screen::-webkit-media-controls, video:-webkit-full-screen::-webkit-media-text-track-container { display: none !important; opacity: 0; }

This will style Safari's normal controllers, and make sure they don't show and make it's kinda awkward.

<hr />

So long so good. All we need now to get the controller to work. This can be done by a little jQuery/Javascript code by using the fullscreen API

$(".fullscreen").click(function(){ if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { // exit full-screen if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }else if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) { var i = $("#videoContainer"); // go full-screen if (i.requestFullscreen) { i.requestFullscreen(); } else if (i.webkitRequestFullscreen) { i.webkitRequestFullscreen(); } else if (i.mozRequestFullScreen) { i.mozRequestFullScreen(); } else if (i.msRequestFullscreen) { i.msRequestFullscreen(); } } });

If you wanna know how to add Picture In Picture you can see this post here

来源:https://stackoverflow.com/questions/27452624/safari-html5-video-fullscreen-size

Recommend

  • Disable Touch on Materialize Carousel
  • iPad 2 Safari not showing progressive .jpg files
  • ASP.NET MVC Entity Framework CodeFirst Many To Many (CRUD)
  • Change permission of a ZipEntry
  • Check for newer version of page, and if existing, reload
  • Problem in JPA-Mapping
  • overriding equals and hashcode methods in java?
  • How can I use Angular4 *ngFor to create a data table?
  • How to detect beginning of line, or: “The name 'getCharPositionInLine' does not exist in t
  • Advertising Identifier for devices lower than iOS 6.0
  • Python read xml with related child elements
  • Pyinstaller GLIBC_2.15 not found
  • Passing HTTP Post from AWS API GW to Lambda
  • AWS RDS Parameter Group not changing MySQL encoding
  • .Net core Hosted Services guaranteed to complete
  • Tensorflow Dataset API restore Iterator after completing one epoch
  • How to split wav file into two or more parts using c#
  • Floating parent div grows to hypothetical width of floating child div
  • Content-Type alternative in MQTT
  • Calculate time from document
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • Amazon Elastick BeanStalk error: Failed to create the AWS Elastic Beanstalk application version
  • How to turn off notice reporting in xampp?
  • how to run ejabberd with Erlang on Heroku?
  • Send array to next viewcontroller iOs xcode [duplicate]
  • Bind selectedDates Aggregation for Calendar
  • Functions by reference or by variable, which to use when?
  • Codeigniniter insert data through models and controller
  • Call Microservice from another Microservice within Docker
  • customize soft keyboard key preview
  • Using Service Component Runtime
  • How to use FirstOrDefault inside Include
  • WPF custom control and direct content support
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • Running R's aov() mixed effects model from Python using rpy2
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?
  • Access to a Matlab gui from the web
  • ReferenceError: TextEncoder is not defined
  • How to check if object is null in Java?