Phone

[Tsuksi]

All the pages work on phone except the watch page. Errors out.

[Jeydin]

Yeah I get this too, the screen just turns white

[Jeydin]

https://streamable.com/vigchx

[debsishu]

https://streamable.com/vigchx

Mine works fine, can't seem to reproduce the issue. What browser are you using?

[Jeydin]

Safari What browser and phone are you using?

[debsishu]

Safari What browser and phone are you using?

I read about this. And the issue is with iOS devices, all iOS browsers are all build upon safari, and safari doesn't support HLS video streaming, that's why It errors out.

There are work arounds for that, but currently I don't have a iOS device, so can't test those.

[Jeydin]

Dang

[Jeydin]

I could test it for you

[debsishu]

I could test it for you

well, without having a physical device in hand can't implement those. So for now I can't do anything😔.

you can try out this https://stackoverflow.com/questions/43287226/hls-video-streaming-on-ios-safari#:~:text=else%20if%20(video.canPlayType(%27application/vnd.apple.mpegurl%27))%20%7B%0A%20%20%20%20video.src%20%3D%20%27https%3A//video%2Ddev.github.io/streams/x36xhzz/x36xhzz.m3u8%27%3B%0A%20%20%20%20video.addEventListener(%27loadedmetadata%27%2C%20function()%20%7B%0A%20%20%20%20%20%20video.play()%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D

[Jeydin]

D:

[Jeydin]

I changed the lines to the one I saw from the Stackoverflow, I think I did something but I don't think I'm quite there yet, this is what I see on the watch page now:

[Jeydin]

Oh but hey when I switch to external it works now External is mid I need my delicious internal to work :3

[Jeydin]

Something weird and mind blowing happened when I switched back I opened Attack on Titan Internal video was blank, so I switched to external, which worked When I switched back to internal, something weird happens... https://streamable.com/s3cvam

[Jeydin]

How do I make the video fit where it's supposed to go?

[debsishu]

How do I make the video fit where it's supposed to go?

I have used https://plyr.io/ for the video player, I think you have to set up that

[debsishu]

I think you have to do something similar like this, not so sure

else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      video.src = src;
      const defaultOptions = {
        captions: { active: true, update: true, language: "en" },
      };
      let player = new plyr(video, defaultOptions);
      setPlayer(new plyr(video, defaultOptions));
      player.on("enterfullscreen", (event) => {
        window.screen.orientation.lock("landscape");
      });

      player.on("exitfullscreen", (event) => {
        window.screen.orientation.lock("portrait");
      });

      player.on("timeupdate", function (e) {
        var time = player.currentTime,
          lastTime = localStorage.getItem(title);
        if (time > lastTime) {
          localStorage.setItem(title, Math.round(player.currentTime));
        }
        if (player.ended) {
          localStorage.removeItem(title);
        }
      });

      player.on("play", function (e) {
        if (flag) {
          var lastTime = localStorage.getItem(title);
          if (lastTime !== null && lastTime > player.currentTime) {
            player.forward(parseInt(lastTime));
          }
          flag = false;
        }
      });

      player.on("seeking", (event) => {
        localStorage.setItem(title, Math.round(player.currentTime));
      });
    } else {
      const player = new plyr(src, defaultOptions);
      player.source = {
        type: "video",
        title: "Example title",
        sources: [
          {
            src: src,
            type: "video/mp4",
          },
        ],
      };
    }

[Tsuksi]

I think you have to do something similar like this, not so sure

else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      video.src = src;
      const defaultOptions = {
        captions: { active: true, update: true, language: "en" },
      };
      let player = new plyr(video, defaultOptions);
      setPlayer(new plyr(video, defaultOptions));
      player.on("enterfullscreen", (event) => {
        window.screen.orientation.lock("landscape");
      });

      player.on("exitfullscreen", (event) => {
        window.screen.orientation.lock("portrait");
      });

      player.on("timeupdate", function (e) {
        var time = player.currentTime,
          lastTime = localStorage.getItem(title);
        if (time > lastTime) {
          localStorage.setItem(title, Math.round(player.currentTime));
        }
        if (player.ended) {
          localStorage.removeItem(title);
        }
      });

      player.on("play", function (e) {
        if (flag) {
          var lastTime = localStorage.getItem(title);
          if (lastTime !== null && lastTime > player.currentTime) {
            player.forward(parseInt(lastTime));
          }
          flag = false;
        }
      });

      player.on("seeking", (event) => {
        localStorage.setItem(title, Math.round(player.currentTime));
      });
    } else {
      const player = new plyr(src, defaultOptions);
      player.source = {
        type: "video",
        title: "Example title",
        sources: [
          {
            src: src,
            type: "video/mp4",
          },
        ],
      };
    }

Yea that works you should probably merge that thank you!