How Do I Add Full-Screen Mode To A Html5?

Question

I want to add fullscreen mode in below html5 code Suggest me how I can make changes in the given code, I am facing problem in adding the fullscreen code in this script

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('https://weblive.goonj.pk/dawnnewsweb_360p/index.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
 // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
 // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
 // This is using the built-in support of the plain video element, without using hls.js.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://weblive.goonj.pk/dawnnewsweb_360p/index.m3u8';
    video.addEventListener('canplay',function() {
      video.play();
    });
  }
</script>

PLEASE turn off caps-lock - considered yelling and harder to read. Why is this tagged `java` (code: `myDevice.setFullScreenWindow(myWindow);`)? check the [help] — user85421, Oct 04 '18 at 19:24
Possible duplicate of [Is there a way to make HTML5 video fullscreen?](https://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen) — Andreas, Oct 04 '18 at 19:31
Andreas i already read it but i wanna add full screen mode in my code which i had given , i am having problem in adding in this code so i want to know how i can add in this script — Hamdan, Oct 04 '18 at 19:40

score 3 · Answer 1 · edited Oct 25 '18 at 07:43

3

Try making a button element with a script attached to it that runs this code when the button is clicked

video.setFullScreenWindow()

edited Oct 25 '18 at 07:43

Mohammad

21,175
15
55
84

answered Oct 16 '18 at 19:35

chillinOutMaxin

182
1
13

score 2 · Answer 2 · answered Sep 27 '19 at 07:05

2

The Fullscreen API adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed.

try Element.requestFullscreen(options);

answered Sep 27 '19 at 07:05

Anoop Gupta

131
1
5

How Do I Add Full-Screen Mode To A Html5?

2 Answers2