Videos are not played in fullscreen

ghost commented 4 years ago

@rgaudin commented on Sep 16, 2019, 5:57 PM UTC:

fullscreen doesn't work as expected on iOS:

portrait: covers full-width but retain ratio and the rest of the page visible
landscape: same size as portrait, rest of the page is visible
landscape: video too large and misplaced going back to portrait after fullscreen in lanscape (see #35)
app chrome (search bar, navigation) always visible

This issue was moved by kelson42 from openzim/youtube#39.

ghost commented 4 years ago

@kelson42 commented on Sep 28, 2019, 5:45 AM UTC:

@rgaudin Tested with 1.10.1, I confirm the problem. Does that come from the reader? We should probably make a bug report on iOS repo?

ghost commented 4 years ago

stale[bot] commented on Nov 27, 2019, 5:59 AM UTC:

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

ghost commented 4 years ago

@kelson42 commented on Nov 27, 2019, 6:49 AM UTC:

This looks to be the corresponding ticket in Kiwix for iOS kiwix/apple#80

ghost commented 4 years ago

stale[bot] commented on Jan 26, 2020, 7:42 AM UTC:

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

ghost commented 4 years ago

@kelson42 commented on Apr 15, 2020, 8:06 PM UTC:

Closing because duplicate of kiwix/apple#80

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

automactic commented 3 years ago

@kelson42 If we don't use the <video> tag and a video format that AVPlayer in the iOS SDK supports, the video is not going to be played in full screen like other apps that do have a video format the OS support.

For example, this is the HTML of a video:

<div poster="../I/videos/M--BHwq9Pwc/video.jpg" data-setup="{&quot;techOrder&quot;: [&quot;html5&quot;, &quot;ogvjs&quot;], &quot;ogvjs&quot;: {&quot;base&quot;: &quot;assets/ogvjs&quot;}, &quot;autoplay&quot;: false, &quot;preload&quot;: true, &quot;controls&quot;: true, &quot;controlBar&quot;: {&quot;pictureInPictureToggle&quot;: false}}" crossorigin="" class="video-js vjs-default-skin vjs-paused video_container-dimensions vjs-controls-enabled vjs-touch-enabled vjs-v7 vjs-user-active" id="video_container" tabindex="-1" lang="en-us" role="region" aria-label="Video Player"><ogvjs class="ogvjs2 vjs-tech" src="../I/videos/M--BHwq9Pwc/video.webm" preload="true"><canvas width="480" height="600" style="position: absolute; top: 0px; left: 0px; width: 216px; height: 100%; object-fit: contain; margin: 0px 79.5px;"></canvas><img src="../I/videos/M--BHwq9Pwc/video.jpg" class="ogvjs-poster" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 210.9375px; object-fit: contain; visibility: visible; margin: 29.53125px 0px;"></ogvjs><div class="vjs-poster" aria-disabled="false" style="background-image: url(&quot;kiwix://974ae6b3-90e8-3975-220a-9368f181f2ee/I/videos/M--BHwq9Pwc/video.jpg&quot;);"></div><div class="vjs-text-track-display" aria-live="off" aria-atomic="true"><div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: 1.5%;"></div></div><div class="vjs-loading-spinner" dir="ltr"><span class="vjs-control-text">Video Player is loading.</span></div><button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Play Video</span></button><div class="vjs-control-bar" dir="ltr"><button class="vjs-play-control vjs-control vjs-button" type="button" title="Play" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Play</span></button><div class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal"><button class="vjs-mute-control vjs-control vjs-button vjs-vol-3" type="button" title="Mute" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Mute</span></button><div class="vjs-volume-control vjs-control vjs-volume-horizontal"><div tabindex="0" class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Volume Level" aria-live="polite" aria-valuetext="100%"><div class="vjs-volume-level" style="width: 100%;"><span class="vjs-control-text"></span></div></div></div></div><div class="vjs-current-time vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Current Time&nbsp;</span><span class="vjs-current-time-display" aria-live="off" role="presentation">0:00</span></div><div class="vjs-time-control vjs-time-divider" aria-hidden="true"><div><span>/</span></div></div><div class="vjs-duration vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Duration&nbsp;</span><span class="vjs-duration-display" aria-live="off" role="presentation">0:57</span></div><div class="vjs-progress-control vjs-control"><div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="0:00 of 0:57"><div class="vjs-load-progress"><span class="vjs-control-text"><span>Loaded</span>: <span class="vjs-control-text-loaded-percentage">0%</span></span></div><div class="vjs-play-progress vjs-slider-bar" aria-hidden="true" style="width: 0%;"></div></div></div><div class="vjs-live-control vjs-control vjs-hidden"><div class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type&nbsp;</span>LIVE</div></div><button class="vjs-seek-to-live-control vjs-control" type="button" title="Seek to live, currently behind live" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Seek to live, currently behind live</span><span class="vjs-seek-to-live-text" aria-hidden="true">LIVE</span></button><div class="vjs-remaining-time vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Remaining Time&nbsp;</span><span aria-hidden="true">-</span><span class="vjs-remaining-time-display" aria-live="off" role="presentation">0:57</span></div><div class="vjs-custom-control-spacer vjs-spacer ">&nbsp;</div><div class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><div class="vjs-playback-rate-value">1x</div><button class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Playback Rate" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Playback Rate</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"></ul></div></div><div class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Chapters" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Chapters</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-title">Chapters</li></ul></div></div><div class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Descriptions" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Descriptions</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-selected" role="menuitemradio" aria-disabled="false" tabindex="-1" aria-checked="true"><span class="vjs-menu-item-text">descriptions off</span><span class="vjs-control-text" aria-live="polite">, selected</span></li></ul></div></div><div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"><button class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Captions" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Captions</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-texttrack-settings" role="menuitem" aria-disabled="false" tabindex="-1"><span class="vjs-menu-item-text">captions settings</span><span class="vjs-control-text" aria-live="polite">, opens captions settings dialog</span></li><li class="vjs-menu-item vjs-selected" role="menuitemradio" aria-disabled="false" tabindex="-1" aria-checked="true"><span class="vjs-menu-item-text">captions off</span><span class="vjs-control-text" aria-live="polite">, selected</span></li><li class="vjs-menu-item vjs-subtitles-menu-item" role="menuitemradio" aria-disabled="false" tabindex="-1" aria-checked="false"><span class="vjs-menu-item-text">English (United Kingdom)</span><span class="vjs-control-text" aria-live="polite"></span></li></ul></div></div><div class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Audio Track" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Audio Track</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"></ul></div></div><button class="vjs-fullscreen-control vjs-control vjs-button" type="button" title="Fullscreen" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Fullscreen</span></button></div><div class="vjs-error-display vjs-modal-dialog vjs-hidden " aria-describedby="video_container_component_339_description" aria-hidden="true" aria-label="Modal Window" role="dialog"><p class="vjs-modal-dialog-description vjs-control-text" id="video_container_component_339_description">This is a modal window.</p><div class="vjs-modal-dialog-content" role="document"></div></div><div class="vjs-modal-dialog vjs-hidden  vjs-text-track-settings" aria-describedby="video_container_component_344_description" aria-hidden="true" aria-label="Caption Settings Dialog" role="dialog"><p class="vjs-modal-dialog-description vjs-control-text" id="video_container_component_344_description">Beginning of dialog window. Escape will cancel and close the window.</p><div class="vjs-modal-dialog-content" role="document"><div class="vjs-track-settings-colors"><fieldset class="vjs-fg-color vjs-track-setting"><legend id="captions-text-legend-video_container_component_344">Text</legend><label id="captions-foreground-color-video_container_component_344" class="vjs-label">Color</label><select aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344"><option id="captions-foreground-color-video_container_component_344-White" value="#FFF" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344 captions-foreground-color-video_container_component_344-White">White</option><option id="captions-foreground-color-video_container_component_344-Black" value="#000" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344 captions-foreground-color-video_container_component_344-Black">Black</option><option id="captions-foreground-color-video_container_component_344-Red" value="#F00" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344 captions-foreground-color-video_container_component_344-Red">Red</option><option id="captions-foreground-color-video_container_component_344-Green" value="#0F0" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344 captions-foreground-color-video_container_component_344-Green">Green</option><option id="captions-foreground-color-video_container_component_344-Blue" value="#00F" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344 captions-foreground-color-video_container_component_344-Blue">Blue</option><option id="captions-foreground-color-video_container_component_344-Yellow" value="#FF0" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344 captions-foreground-color-video_container_component_344-Yellow">Yellow</option><option id="captions-foreground-color-video_container_component_344-Magenta" value="#F0F" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344 captions-foreground-color-video_container_component_344-Magenta">Magenta</option><option id="captions-foreground-color-video_container_component_344-Cyan" value="#0FF" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-color-video_container_component_344 captions-foreground-color-video_container_component_344-Cyan">Cyan</option></select><span class="vjs-text-opacity vjs-opacity"><label id="captions-foreground-opacity-video_container_component_344" class="vjs-label">Transparency</label><select aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-opacity-video_container_component_344"><option id="captions-foreground-opacity-video_container_component_344-Opaque" value="1" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-opacity-video_container_component_344 captions-foreground-opacity-video_container_component_344-Opaque">Opaque</option><option id="captions-foreground-opacity-video_container_component_344-SemiTransparent" value="0.5" aria-labelledby="captions-text-legend-video_container_component_344 captions-foreground-opacity-video_container_component_344 captions-foreground-opacity-video_container_component_344-SemiTransparent">Semi-Transparent</option></select></span></fieldset><fieldset class="vjs-bg-color vjs-track-setting"><legend id="captions-background-video_container_component_344">Background</legend><label id="captions-background-color-video_container_component_344" class="vjs-label">Color</label><select aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344"><option id="captions-background-color-video_container_component_344-Black" value="#000" aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344 captions-background-color-video_container_component_344-Black">Black</option><option id="captions-background-color-video_container_component_344-White" value="#FFF" aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344 captions-background-color-video_container_component_344-White">White</option><option id="captions-background-color-video_container_component_344-Red" value="#F00" aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344 captions-background-color-video_container_component_344-Red">Red</option><option id="captions-background-color-video_container_component_344-Green" value="#0F0" aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344 captions-background-color-video_container_component_344-Green">Green</option><option id="captions-background-color-video_container_component_344-Blue" value="#00F" aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344 captions-background-color-video_container_component_344-Blue">Blue</option><option id="captions-background-color-video_container_component_344-Yellow" value="#FF0" aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344 captions-background-color-video_container_component_344-Yellow">Yellow</option><option id="captions-background-color-video_container_component_344-Magenta" value="#F0F" aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344 captions-background-color-video_container_component_344-Magenta">Magenta</option><option id="captions-background-color-video_container_component_344-Cyan" value="#0FF" aria-labelledby="captions-background-video_container_component_344 captions-background-color-video_container_component_344 captions-background-color-video_container_component_344-Cyan">Cyan</option></select><span class="vjs-bg-opacity vjs-opacity"><label id="captions-background-opacity-video_container_component_344" class="vjs-label">Transparency</label><select aria-labelledby="captions-background-video_container_component_344 captions-background-opacity-video_container_component_344"><option id="captions-background-opacity-video_container_component_344-Opaque" value="1" aria-labelledby="captions-background-video_container_component_344 captions-background-opacity-video_container_component_344 captions-background-opacity-video_container_component_344-Opaque">Opaque</option><option id="captions-background-opacity-video_container_component_344-SemiTransparent" value="0.5" aria-labelledby="captions-background-video_container_component_344 captions-background-opacity-video_container_component_344 captions-background-opacity-video_container_component_344-SemiTransparent">Semi-Transparent</option><option id="captions-background-opacity-video_container_component_344-Transparent" value="0" aria-labelledby="captions-background-video_container_component_344 captions-background-opacity-video_container_component_344 captions-background-opacity-video_container_component_344-Transparent">Transparent</option></select></span></fieldset><fieldset class="vjs-window-color vjs-track-setting"><legend id="captions-window-video_container_component_344">Window</legend><label id="captions-window-color-video_container_component_344" class="vjs-label">Color</label><select aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344"><option id="captions-window-color-video_container_component_344-Black" value="#000" aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344 captions-window-color-video_container_component_344-Black">Black</option><option id="captions-window-color-video_container_component_344-White" value="#FFF" aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344 captions-window-color-video_container_component_344-White">White</option><option id="captions-window-color-video_container_component_344-Red" value="#F00" aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344 captions-window-color-video_container_component_344-Red">Red</option><option id="captions-window-color-video_container_component_344-Green" value="#0F0" aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344 captions-window-color-video_container_component_344-Green">Green</option><option id="captions-window-color-video_container_component_344-Blue" value="#00F" aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344 captions-window-color-video_container_component_344-Blue">Blue</option><option id="captions-window-color-video_container_component_344-Yellow" value="#FF0" aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344 captions-window-color-video_container_component_344-Yellow">Yellow</option><option id="captions-window-color-video_container_component_344-Magenta" value="#F0F" aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344 captions-window-color-video_container_component_344-Magenta">Magenta</option><option id="captions-window-color-video_container_component_344-Cyan" value="#0FF" aria-labelledby="captions-window-video_container_component_344 captions-window-color-video_container_component_344 captions-window-color-video_container_component_344-Cyan">Cyan</option></select><span class="vjs-window-opacity vjs-opacity"><label id="captions-window-opacity-video_container_component_344" class="vjs-label">Transparency</label><select aria-labelledby="captions-window-video_container_component_344 captions-window-opacity-video_container_component_344"><option id="captions-window-opacity-video_container_component_344-Transparent" value="0" aria-labelledby="captions-window-video_container_component_344 captions-window-opacity-video_container_component_344 captions-window-opacity-video_container_component_344-Transparent">Transparent</option><option id="captions-window-opacity-video_container_component_344-SemiTransparent" value="0.5" aria-labelledby="captions-window-video_container_component_344 captions-window-opacity-video_container_component_344 captions-window-opacity-video_container_component_344-SemiTransparent">Semi-Transparent</option><option id="captions-window-opacity-video_container_component_344-Opaque" value="1" aria-labelledby="captions-window-video_container_component_344 captions-window-opacity-video_container_component_344 captions-window-opacity-video_container_component_344-Opaque">Opaque</option></select></span></fieldset></div><div class="vjs-track-settings-font"><fieldset class="vjs-font-percent vjs-track-setting"><legend id="captions-font-size-video_container_component_344" class="">Font Size</legend><select aria-labelledby="captions-font-size-video_container_component_344"><option id="captions-font-size-video_container_component_344-50" value="0.50" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-50">50%</option><option id="captions-font-size-video_container_component_344-75" value="0.75" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-75">75%</option><option id="captions-font-size-video_container_component_344-100" value="1.00" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-100">100%</option><option id="captions-font-size-video_container_component_344-125" value="1.25" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-125">125%</option><option id="captions-font-size-video_container_component_344-150" value="1.50" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-150">150%</option><option id="captions-font-size-video_container_component_344-175" value="1.75" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-175">175%</option><option id="captions-font-size-video_container_component_344-200" value="2.00" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-200">200%</option><option id="captions-font-size-video_container_component_344-300" value="3.00" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-300">300%</option><option id="captions-font-size-video_container_component_344-400" value="4.00" aria-labelledby="captions-font-size-video_container_component_344 captions-font-size-video_container_component_344-400">400%</option></select></fieldset><fieldset class="vjs-edge-style vjs-track-setting"><legend id="video_container_component_344" class="">Text Edge Style</legend><select aria-labelledby="video_container_component_344"><option id="video_container_component_344-None" value="none" aria-labelledby="video_container_component_344 video_container_component_344-None">None</option><option id="video_container_component_344-Raised" value="raised" aria-labelledby="video_container_component_344 video_container_component_344-Raised">Raised</option><option id="video_container_component_344-Depressed" value="depressed" aria-labelledby="video_container_component_344 video_container_component_344-Depressed">Depressed</option><option id="video_container_component_344-Uniform" value="uniform" aria-labelledby="video_container_component_344 video_container_component_344-Uniform">Uniform</option><option id="video_container_component_344-Dropshadow" value="dropshadow" aria-labelledby="video_container_component_344 video_container_component_344-Dropshadow">Dropshadow</option></select></fieldset><fieldset class="vjs-font-family vjs-track-setting"><legend id="captions-font-family-video_container_component_344" class="">Font Family</legend><select aria-labelledby="captions-font-family-video_container_component_344"><option id="captions-font-family-video_container_component_344-ProportionalSansSerif" value="proportionalSansSerif" aria-labelledby="captions-font-family-video_container_component_344 captions-font-family-video_container_component_344-ProportionalSansSerif">Proportional Sans-Serif</option><option id="captions-font-family-video_container_component_344-MonospaceSansSerif" value="monospaceSansSerif" aria-labelledby="captions-font-family-video_container_component_344 captions-font-family-video_container_component_344-MonospaceSansSerif">Monospace Sans-Serif</option><option id="captions-font-family-video_container_component_344-ProportionalSerif" value="proportionalSerif" aria-labelledby="captions-font-family-video_container_component_344 captions-font-family-video_container_component_344-ProportionalSerif">Proportional Serif</option><option id="captions-font-family-video_container_component_344-MonospaceSerif" value="monospaceSerif" aria-labelledby="captions-font-family-video_container_component_344 captions-font-family-video_container_component_344-MonospaceSerif">Monospace Serif</option><option id="captions-font-family-video_container_component_344-Casual" value="casual" aria-labelledby="captions-font-family-video_container_component_344 captions-font-family-video_container_component_344-Casual">Casual</option><option id="captions-font-family-video_container_component_344-Script" value="script" aria-labelledby="captions-font-family-video_container_component_344 captions-font-family-video_container_component_344-Script">Script</option><option id="captions-font-family-video_container_component_344-SmallCaps" value="small-caps" aria-labelledby="captions-font-family-video_container_component_344 captions-font-family-video_container_component_344-SmallCaps">Small Caps</option></select></fieldset></div><div class="vjs-track-settings-controls"><button type="button" class="vjs-default-button" title="restore all settings to the default values">Reset<span class="vjs-control-text"> restore all settings to the default values</span></button><button type="button" class="vjs-done-button">Done</button></div></div><button class="vjs-close-button vjs-control vjs-button" type="button" aria-disabled="false" title="Close Modal Dialog"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Close Modal Dialog</span></button><p class="vjs-control-text">End of dialog window.</p></div></div>

I think we should close this as won't do / not supported / known issue if no one has a good solution. It is pointless to leave this issue open without anyone be able to really make any progress

cc @rgaudin

rgaudin commented 3 years ago

FYI, fullscreen works correctly on iOS when using mp4 format for video (See this zim).

We create ZIMs with webm videos so that we only need one ZIM for all platforms and the decoding is done in JS for apple readers/browsers. The lib internally uses a <canvas /> to draw each frame so this is not a video anymore from the browser's POV.

Would it be possible to go fullscreen just for the canvas? No idea.

macOS doesn't work even with mp4 ZIM (clicking the icon does nothing) though.

kelson42 commented 3 years ago

If this is technically not possible to get fullscreen, then we should:

Evaluate if no workaround would be possible? Something which scale the video to a high level?
Remove the fullscreen button if not working

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

kelson42 commented 3 years ago

the video is not going to be played in full screen like other apps

@automactic Do you have a reference for this affirmation? I don't understand why iOS should not allow a fullscreen canevas.

Do you have some kind of log of what is happening in the HTML render zone? What happen when someone click on the "fullscreen" icon?

kelson42 commented 3 years ago

Interesting ticket https://github.com/hartman/videojs-ogvjs/issues/23

kelson42 commented 3 years ago

The root fo the problem seems to be the lack of support of Element.requestFullscreen() in WKWebView. It seems to have been done on purpose at WebKit level, see https://bugs.webkit.org/show_bug.cgi?id=108250. The reintroduction of the support has its own open ticket at https://bugs.webkit.org/show_bug.cgi?id=162563.

Actually this ticket seems to be the exact same problem as the one open by @paladox 4 years ago at https://github.com/videojs/video.js/issues/3643. No solution, only a workaround which should be to put the video in “full window”. This has been implemented at video.js, see https://github.com/hartman/videojs-ogvjs/issues/23. Unfortunately the combination with ogv.js still fails because of https://github.com/brion/ogv.js/issues/416.

automactic commented 3 years ago

If it is using Element.requestFullscreen then I think yes, there won't be any fullscreen until there is a UI delegate for iOS devs to integrate with.

There are already ones that handles when the webpage wants to show alert / file upload panel, so maybe one day there will be one that will handle fullscreen

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

kelson42 commented 2 years ago

@automactic Now that webm native support seems to be in iOS https://9to5mac.com/2021/08/10/apple-adding-webm-audio-codec-support-to-safari-with-ios-15/, what stop us to provide this?

automactic commented 2 years ago

Don't get your hopes up too high, first of all, this article only mentions audio support.

Make a zim file with <video> and then let's see if it works.

Also note that iPadOS and iOS is now different, so what's working on your iPad doesn't necessarily work on iPhones.

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

kelson42 commented 2 weeks ago

@BPerlakiH It seems that fullscreen works fine now in both macOS and iOS after https://github.com/kiwix/kiwix-apple/pull/764 ?

BPerlakiH commented 2 weeks ago

Yes, it works as expected with the latest iOS and macOS. The only issue we did identified so far, is that the first launch to full screen on iOS is not playing the video, but putting that into either picture and picture or exiting and switching to full-screen again solves that issue.

kelson42 commented 1 week ago

@BPerlakiH Is that a bug in iOS or a bug in Kiwix or in the ZIM? Maybe it would make sense to open a dedicated issue?

kelson42 commented 23 hours ago

This issue is very old and to a large extent it has been fixed. iOS work perfectly on version 17 (and with recent ZIM files). Same on macOS modulo #785

kiwix / kiwix-apple

Videos are not played in fullscreen #248