full screen video button?

Feb 06, 2014

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)

?

178 Replies
Paul Wijnen

UPDATE

Store the video files outside the webobject folder.
Copy the video files after publishing into this folder:
\story_content\external_files\

YOU CAN USE A VARIABLE IN STORYLINE TO PROCEED TO THE NEXT SLIDE WHEN THE VIDEO HAS ENDED. I USED "autoEndSlide" FOR THAT.
YOU CAN USE THIS METHOD FOR ANYTHING YOU WANT OF COURSE.

I DICOVERED THAT THE AUTOPLAY FUNCTION OF THE VIDEO TAG WILL CAUSE DOUBLE AUDIO IN IE. SO DONT USE IT AT ALL.

I ALSO READ THAT THE MP4 VIDEO CODING SHOULD BE SET TO "BASELINE PROFILE" AND AAC AUDIO.

 

NEW CODE

<!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">

//adding these attrributes allows the browser to use full-screen

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 controls="controls">

<source src="../../external_files/video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">

Your browser does not support the video tag.<br>

Please try to change your browser's compatibility mode.<br>

Alternatively, you can try using another browser.

</video>

 

<script>

var player = parent.GetPlayer();

player.SetVar("autoEndSlide","false");

     

var video = document.getElementsByTagName('video')[0]; 

video.onended = function(proceed) {

//alert('Video Ended');

var player = parent.GetPlayer();

player.SetVar("autoEndSlide","true");

};

 

//this is a workaround for the autoplay function

setTimeout(function(delay){

video.play();

}, 1000);

</script>

 

</body>

</html>

Will Findlay

I've reconsidered how I do web objects now and I now usually use "display in a new browser window" (with no browser controls) instead of "display in slide." This avoids all the mess that is "embedding." Browsers and site owners change the rules about embedding so often that I think it just isn't worth it. If you think about it, there are actually several advantages to opening a web object in a new window:

1. The window can be the size you want regardless of whether your storyline presentation scales.

2. You can include content on the slide that explains what is being displayed (a video, surveymonkey survey, etc...) and tells the user to close the window when done.

3. If you are in an https (secure) environment, the link to the web object can be http without issue.

To me it just isn't worth the hassle trying to get all the stars aligned so that video that is stuck in that box plays the way I want it to.

Craig Johnson

I'm a Storyline newbie, but has anyone else noticed that the full screen option is there and works when viewing the course in an iPad?

I'm using Chrome on the iPad, and viewing the course on my LMS (BizLibrary) with a normal embedded video and NOT opening the video in a new browser window.

If it works there, is there any chance we can get it to work on a PC?

Paul Wijnen
Craig Johnson

I'm a Storyline newbie, but has anyone else noticed that the full screen option is there and works when viewing the course in an iPad?

I'm using Chrome on the iPad, and viewing the course on my LMS (BizLibrary) with a normal embedded video and NOT opening the video in a new browser window.

If it works there, is there any chance we can get it to work on a PC?

I think there is a good change you can get that to work on a PC. All the scripting is done by the player. Just like the youtube or captivate or camtasia videplayer it will detect if you are on a mobile device or on a PC. It will detect if you can use flash or not. The scripting which is used by the video players also contain the "allow fullscreen" part.

When on a PC it will use a flash based player wich can enable the full screen function.
I tested this with a youtube embedded video and the fullscreen function works on a PC. This will most likely be the same for your Vimeo video.

https://www.articulate.com/support/storyline/how-to-add-a-youtube-video-to-storyline

youtube_videoplayer_flash

youtube_videoplayer_flash_full

When on a mobile devide it should use the HTML5 files. I also tested the embedded youtube video on my Android phone. This also works when openeing the HTML5 files. I get a different looking video player with the fullscreen fuction present and working. This is the HTML5 based videoplayer of youtube.

youtube_videoplayer_HTML5

youtube_videoplayer_HTML5_full

When you want to manually use the HTML5 videoplayer (which is built-in all newer major browsers) on a PC, this is a different story.
See earlier posts for more information on that.

I hope this answers your question a little bit. Somebody correct me if I'm wrong :).

George Champlin

Paul, 

I think I missed something. How did you embed your YouTube video in the first screen above? Is it a web object or from a web page. I can't embed YouTube from a webpage because of this issue.

I've also been messing around with your idea of adding the allowfullscreen attribute to the enclosing iframe. Even after the webobject is loaded you can add the attribute to a normal YouTube enclosing iframe, and if you can force a reload of the iframe src, it will activate the fullscreen button. I've only done this with the console so far. But it should be doable to add code to the story.html file to do it.

George Champlin

My previous idea won't work because of cross-domain issues. 

But the real fix, unsanctioned by Articulate I'm sure, is to add the last 3 lines below to the story.js file around line 640:

// Create the iframe
var oIFrame = document.createElement('iframe');
oIFrame.frameBorder = "0";
oIFrame.id = "div" + strId;
oIFrame.style.border = "0";
oIFrame.style.width = "100%";
oIFrame.style.height = "100%";
oIFrame.allowtransparency = "true";

oIFrame.setAttribute('allowfullscreen', "");
oIFrame.setAttribute('webkitallowfullscreen', "");
oIFrame.setAttribute('mozallowfullscreen', "");

Paul Wijnen
George Champlin

Paul, 

I think I missed something. How did you embed your YouTube video in the first screen above? Is it a web object or from a web page. I can't embed YouTube from a webpage because of this issue.

I've also been messing around with your idea of adding the allowfullscreen attribute to the enclosing iframe. Even after the webobject is loaded you can add the attribute to a normal YouTube enclosing iframe, and if you can force a reload of the iframe src, it will activate the fullscreen button. I've only done this with the console so far. But it should be doable to add code to the story.html file to do it.

Hi George,

I used the Web Object method.
The trick is to only use the video ID with this part of youtube URL:

http://www.youtube.com/embed/video_id

Replace "video_id" with the actual video ID. Example:

EMBED CODE
<iframe width="560" height="315" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen></iframe>

NORMAL YOUTUBE URL
https://www.youtube.com/watch?v=YqeW9_5kURI

So, use this as Web Object URL:
http://www.youtube.com/embed/YqeW9_5kURI

SOURCE: https://www.articulate.com/support/storyline/how-to-add-a-youtube-video-to-storyline

Paul Wijnen
George Champlin

My previous idea won't work because of cross-domain issues. 

But the real fix, unsanctioned by Articulate I'm sure, is to add the last 3 lines below to the story.js file around line 640:

// Create the iframe
var oIFrame = document.createElement('iframe');
oIFrame.frameBorder = "0";
oIFrame.id = "div" + strId;
oIFrame.style.border = "0";
oIFrame.style.width = "100%";
oIFrame.style.height = "100%";
oIFrame.allowtransparency = "true";

oIFrame.setAttribute('allowfullscreen', "");
oIFrame.setAttribute('webkitallowfullscreen', "");
oIFrame.setAttribute('mozallowfullscreen', "");

Hi George,

Good find!

I did look into something like that also, but because I have to share my method with other team members, I worked out the method which only involves editing one HTML file. It doenst involve editing storyline files before or after publishing.

I tried to do the same as you, but I tried to do this in the player.js file, so you only have to do this once and not everytime after publishing.

Program Files (x86)\Articulate\Articulate Storyline 2\Content\player.js (same code also around line 640)

I believe a had no luck doing this, but I'm not sure actually. You can give it a go if this is the best solution for you!

Thanks for your input!

George Champlin

Hi Paul,

Good catch. I was able to replace the player.js file in the Program files and now when I publish all my story.js files have the added lines which fix the allowfullscreen issue.

I'm treating it as a software patch. I have worked with teams where we all applied a similar patch to Storyline program files so everyone can share the enhancement.

George Champlin

Make the same 3-line addition to the player.js file in the Content folder. I had to save it as a copy on my desktop. Then, depending on your admin rights, I was able to paste it into the Program Files (x86)\Articulate\Articulate Storyline 2\Content\ folder and overwrite the original player.js.

Now when I publish, Storyline grabs this and other files from the Content folder, changes its name to story.js and adds it to the story_content folder in the published project.

You can also use this technique to tweak the master css files for html5 output. Like, for instance, to change the size of menu items on the iPad if they're too small.

Ashley Terwilliger-Pollard

Hi Eleonora, 

When you embed videos from websites, such as YouTube and Vimeo, in your Articulate content, you may find the fullscreen button is either missing or not working in your published output.

This is a known issue. For security reasons, many web browsers are now restricting fullscreen mode for embedded iframe content.

We can't override browser security restrictions; however, you can enable fullscreen mode (or full-browser mode) by configuring web videos and web objects in your Articulate content to open in a separate window.

Alexandra Masche

Is there a solution/update for this problem? From my perspective it is a storyline problem. As Justin Grenier pointed out the outer iframe is missing the allowfullscreen attribute. Newer versions of the most browser block fullscreen for security reasons in that case. 

In my published projects also the youtube fullscreen button stopped working. A storyline bugfix would be very easy. Articulate simply has to change the output for the outer iframe and add the allowfullscren attribute. In general or better with an option to choose in the dialog window.

 

Alexandra Masche

Hi George,

thank you for sharing your solution. Unfortunately it didn't work for me. I tried to figure out there the problem is and it seems to me that the story.js won’t be used if I play the story_html5.html file. file? Instead the player_compiled.js is used. Is this fix supposed to work with story_html5.html. Any ideas? Any help would be appreciated!

I also tried to replace the player.js file like Paul Wijnen did it. But I failed too.

Rebekah Massmann

Paul,

I greatly appreciate your sharing! I was starting to walk through your steps, and I had a question. This workaround is not actually to work around the full screen problem with external video hosts, is it? This method requires storing the video directly into the Storyline files and providing a method to see it full screen. Does my question/comment make sense? We have the ability to store the file on our servers, but find that the quality and bandwidth needs are less if we can store on Vimeo and embed the linked file. 

I was hoping this was a workaround for that. Bummer! :-/