Forum Discussion
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)
?
178 Replies
I'll just throw my hat in the ring here as also experiencing this issue and it being of importance to our organization to get a solution figured out. I know next to nothing about coding, but it seems like there should be a way to manually change the code to the same security settings.
I will say I have no animosity towards Articulate! It's obvious this is not solely an Articulate or Vimeo issue. It's a major problem these browsers have caused with a lot of providers/tools. We also have an option to embed a video directly into a part of our LMS with html code...guess what, no full screen button there either.
The workaround recommended on this thread (to set the video to open in a new window) doesn't work if you have security settings preventing where the video can be embedded/played. It will show up like the picture below until it is clicked, and then it will play. Plus, we're already launching a new window within the LMS, so to launch another one for a video to play seems clunky.
That said, the best workaround I've found is to change the player settings. For us, the video is the main component of the course, so I just set the player to push the browser to full screen. This may not be a great solution if you had several videos in the course and you wanted the user to be able to fullscreen more selectively, but maybe it will help someone out there. Still, for those who have 1500 courses, what a nightmare. :-(
Please keep us updated!
Thanks Rebekah for sharing your experience and solution here - as Justin mentioned above, we can't promise to make a change based on a video hosting site changes, but once we have any updates from our team or hear about updates from Vimeo we'll be certain to share here.
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.aspI hope this helps you :) Let me know and share if it does!
PaulPS: 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.
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!
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!
Hi Paul,
Thanks for sharing the code here and in regards to the iFrame element you'll see that described here in our KB article about the issue.
Also, when testing the output you'll want to test within the intended environment as testing it locally is known to cause issues such as you ran into with the audio. You can read about that here.
Hi Ashley,
I know and I tested the code online in IE, Firefox and Chrome. It works because it adds these 3 attributes to the iframe element of storyline:
- allowFullScreen
- webkitAllowFullScreen
- mozAllowFullScreen
Happy to hear it Paul - and just wanted to share those reminders for others who come across this fix and don't go all the way back through the thread. :-)
Before I created this solution I created another solution with only the build-in options of SL.
Insert a video file onto your slide and set it to "play on slide".
Copy and paste that video and set it to "play in new window".
Scale that video down to a small size of a button and place below your "normal" video for instance.
Right-mouse click on it and set a poster-frame for it. I created a custom fullscreen button.
Also set a trigger on the small video object to pause the timeline when clicked.
This will pause the video on the slide and open a new window with the video in it at it's original size. This video will have a playbar at the bottom. I believe you will have to enable the controller in the video settings in storyline for this small "video button" / "fullscreen button".
The downside to this is that SL creates TWO video files for this and you might have the double data transfer per video file you watch.
But I wanted to share this with you anyways.
PaulThanks Paul for sharing that explanation with Veronica and all of us here. This is the type of thing we love to see in the community. If you have a chance you may want to look at also recording a video or screencast of how to do this and share that in the forums as well. You could look at using Replay to record and publish so that you could put the MP4 here or up on YouTube.
I don't know if I'm in the correct area but...
So I spent almost 2K on Storyline and characters. My courses are very reliant on videos that will play in fullscreen because I'm showing "blueprints" with details, etc.
I've been reading all the posts here and while I'm impressed with some of the knowledge that's being passed around, I'm also discouraged, thinking that for 2K I still need to go waaay behind the scenes and program my way to my answers. I don't want to do this.
What can I do...this software is useless to me if I can't show videos in HTML5/HD...or at least crystal clear, full screen.
Regards,
Harry
I'm also a bit dissapointed that there is no fullscreen option for videos in Storyline :(
Hi Harry and Paul,
Storyline doesn't have a full screen option for the videos or the course as a whole, but you may want to look at including the videos as web objects or links to open them in a new window as the latter would allow users to likely use the full screen button that may be included in web based videos. As far as embedding videos, you'll see some additional information here on how the full screen button may be missing.
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>
