AWS s3 bucket, add fullscreen and unmute button

Hello,

I am developing a webpage with a video i am hosting from AWS s3 bucket.

The video is set to a loop, so I need a way to implement an “unmute” button and a “fullscreen” button

her is my code html embed:

<video id="video" width="100%" height="100%" muted="muted">
  	<source src="https://aasmund-ivarjord.s3.amazonaws.com/Queen+%E2%80%93+Bohemian+Rhapsody+(Official+Video+Remastered).mp4" type="video/mp4">

</video>

and here is the js for loop:

window.onbeforeunload = function(){
    myStorage.setItem('currentTime', video.currentTime);
    myStorage.setItem('hasUnloaded', true);
	}
	//Global variables
  var myStorage = window.localStorage;
  var video = document.getElementById("video");
  var chapterList = [];
  var chapters = 10; //Set to the desired number
  var currentChapter = Math.floor(Math.random() * 9) // Set number to chapters -1
  
  //Script logic flow
  video.onloadedmetadata = function() {
    createVideoChapters();
  	startVideo();
  };
  
  video.onended = function() {restartVideo()};
  video.ontimeupdate = function() {getVideoCurrentTime()};

	//Functions
  function startVideo(){
    logCurrentChapter();
    if(myStorage.getItem('hasUnloaded') &&  myStorage.getItem('hasUnloaded') != null){
  		 video.currentTime = myStorage.getItem('currentTime');
  	}else{
    	video.currentTime = chapterList[currentChapter].start
    }
    video.play();
  }
  
  function getVideoCurrentTime(){
    if(chapterList[currentChapter].end < video.currentTime){
      if(currentChapter < chapterList.length - 1){
      	console.log("New chapter detected");
        currentChapter++;
        logCurrentChapter();
      }else{
        currentChapter = 0;
      }
    }
  }
  
  function restartVideo(){
    currentChapter = 0;
    myStorage.setItem('currentTime', 0);
    console.log("Restarting the video")
    startVideo();
  }
  
  function logCurrentChapter(){
  	console.log("Chapter " + String(currentChapter + 1) + " / " + String(chapters))
  }
  
  function createVideoChapters(){
  	var videoDuration = video.duration;
    var time = 0; 
    while(time + (videoDuration / chapters) <= videoDuration){
      var chapter = {"start": time, "end": time + (videoDuration / chapters)}
      chapterList.push(chapter)
      time += (videoDuration / chapters)
    }
		//Sets the last elements "end" key value to the full video duration
    chapterList[chapterList.length - 1].end = videoDuration;
  }

</script>

Would be very appreciated with all inputs and feedback.

thanks in advance.

• This topic was modified 3 years, 2 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic