Forum Discussion

DamienDickerson's avatar
DamienDickerson
Community Member
12 years ago

full screen video button?

I can't see full screen video button on playbar after when I importy a movie? Is any way to resize video on full screen after interactiion? (and came back to small size) ?
storyline 360
PaulWijnen-5c1c's avatar
PaulWijnen-5c1c
Community Member
10 years ago

Hi all,

I found a solution for the fullscreen problem with Storyline (2).

First I tried using the MP4 smartplayer from Camtasia (8.6) and use that as a webobject within Storyline. This worked, but I had to set the compatibility mode to IE9 before I could see the fullscreen button. After doing this I found out that it was using a flash based controller. I was hoping it would use the HTML(5) video tag.
So I created a fairly simple code with the video tag and load this as a webobject into storyline. This worked, but again the fullscreen button was disabled or hidden.

I did alot of searching and tried many things. I came to the conclusion that the problem is that Storyline creates an iframe in which the webobject gets loaded. That iframe NEEDS the allowfullscreen code on it, otherwise the fullscreen button wont be there. The iframe which storyline creates doesn't have that code on it, so thats why the fullscreen buttons do not work. Even if you have that code in your own webobject files, it won't work.
I created a simple code with the video tag and made it resizable (elastic). I added a code which adds the fullscreen attributes to the parent iframe element. This makes the fullscreen function work.

Here is my code. You will only need ONE html file!! (and the video file ofcourse)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>Video</title>

<style>

body {
 background-color: #FFFFFF;
 font-family: "Calibri";
 padding: 0px;
 margin: 0px;
 text-align: center;
 width: 100%;
  height: 100%;
  overflow: hidden;
}

video {
 max-width: 100%;
 height: auto;
 padding: 0px;
 margin: 0px;
  overflow: hidden;
}

</style>

<script type="text/javascript">
 var frameEl = window.frameElement;
 if (frameEl) {
  window.frameElement.setAttribute("allowFullScreen", "allowFullScreen");
  window.frameElement.setAttribute("webkitAllowFullScreen", "webkitAllowFullScreen");
  window.frameElement.setAttribute("mozAllowFullScreen", "mozAllowFullScreen");
}
</script>

</head>

<body oncontextmenu="return false">

<video autoplay controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.<br>
  Please try to change your browser's compatibility mode.<br>
  Otherwise you need to try another browser.
</video>

</body>
</html>

<video> tag compatability overview:
http://www.w3schools.com/html/html5_video.asp

I hope this helps you :) Let me know and share if it does!

Paul

PS: I have a project with 72 videos in it. Sometimes when I tested locally, the audio of the videos kept on playing while continuing to the next slide/video. I found out that this doesn't happen when you place the files online. So you know.

VeronicaBudnika's avatar
VeronicaBudnika
Super Hero
10 years ago

Hi Paul, you are certainly some kind of genius :)

I am going to try this, but first, could you help me out with a couple of questions? I am not a code genius, clearly :) 

1. Is this solution to create a full screen button for a video in SL inserted from file, or a web object (i.e. an online video)? Right at the top you said "and load this as a webobject into storyline." but then you said "You will only need ONE html file!! (and the video file of course)" so I am not sure which this applies to (sorry!) 

2. When you say "Here is my code. You will only need ONE html file!! (and the video file of course)" what do you mean by "ONE html file". Do I need to create a new html file after I publish the project and add that code to it?

Sorry if these questions are a bit silly, and thanks for your help!

  • PaulWijnen-5c1c's avatar
    PaulWijnen-5c1c
    Community Member
    10 years ago

    Hi Veronica,

    Because of the "genius" remark I'm more than happy to explain this to you :P.

    Step 1:
    Create a folder for the webobject files.

    Step 2:
    Create a new HTML file and paste the code I gave you in it.
    Rename "video.mp4" to the name of your video file.

    Step 3:
    Place your video file next to the HTML file. MP4 / WebM / Ogg (MP4 is the most compatible)
    http://www.w3schools.com/html/html5_video.asp
    So now we have 2 files.

    Step 4:
    Insert a webobject onto your slide in SL. Browse to the folder you created which has the 2 files in it. It doesn't matter where you saved your files. SL will copy these files to the published folder when publishing your project.

    Step 5:
    Publish and see if it works.

    Step 6:
    Ask me again if you have any questions :).

    Good luck!