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)
?
Forum Discussion
178 Replies
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!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.
Hi Alexandra,
Try my solution with the Web Object / HTML file and the video (MP4) file.
Just copy and paste the code which I gave in this thread.
Hi George
I've just had this problem and your solution has saved the day. Brilliant!
Thanks
Gavin
You could always just create a button saying full screen and just have it link to a layer with a full screen video on it.
I am new to Articulate/Storyline, however as a Video Producer, would certainly like to add my voice to those who would like to see full-screen support for MP4s. Thank you.
Thanks Again, Ashley --
I did clear my signature (thanks!) and I uploaded one story file, with its output and scorm as well. In the event that this will help ....
I did tell Vimeo all of that - in regards to the fact that many videos are suddenly changed without any provocation on my part....but as long as they are being added to a 3rd party desktop authoring solution -- they won't help.
Thanks anyway ... if you happen to see anything in the files (that I re-attached to my previous post), let me know....
~Cathy
Ashley,
Yes, it works in html5 on an iPad, with the mobile app publishing option disabled. It is indeed the vimeo full screen button, as opposed to the iPad video controls that appear when opening videos embedded in articulate's player. So far, I've also opened the course through chrome on my desktop, and the full screen button is not present.
I sent along these comments to Vimeo last night, and they confirmed my message had been forwarded to the appropriate parties.
James
Hey Cathy,
As much as I'd love to be able to to help, we won't be able to commit to a fix for this issue in the short term. We will evaluate and prioritize Vimeo's change according to its breadth and depth of impact on our customers and make a decision from there, and we'll keep this forum thread updated with any developments.
In the interim, if you find a product or service that is handling Vimeo's update better than we are, we'd welcome that information as well.
Good luck with your project!
Completely understand. I will start the research project…and I will certainly pass anything that I uncover over to you….but the point here is that if ‘frames’ are considered legacy by the major browsers, then that will impact your architecture, which is why we need to consider switching. Not because of Vimeo – but because the 3 major browsers are stopping their support of it. That’s the issue. ☹
For example, with a youtube video, you could use a screengrab of the video with a play icon (triangle) put over the top of it that opens to a url in this format: https://www.youtube.com/embed/0TfNv1C-VOs?rel=0&showinfo=0&autoplay=1
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.
Great!
A patch sounds very profesional. How do you create that? (in a nut shell)
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.
Create a html file and enter the following code:
<!DOCTYPE html>
<html>
<head>
<title>title of your video html file</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
</head>
<body>
<video class="afterglow" id="myvideo" width="1280" height="720">
<source type="video/mp4" src="/path/to/your_video.mp4" />
</video>
</body>
<html>Enter the right path to the local or web-hosted video ("/path/to/your_video.mp4"). Insert the html file as a webobject.
During the developing process: Pay attention that there is a serious bug/missing feature in storyline, that requires to delete the webobject on every change you make in the html file. More see my thread here: https://community.articulate.com/discussions/articulate-storyline/need-help-for-bugfix
PS: Of course there a many other good free html5 players (some with more/different functions). Usually they provide a demo html file, which you simply can include as a webobject.
Alternatively, we can set "display:allowed;" in player.css intead of deleting "video::-webkit-media-controls-fullscreen-button,".
Hi Nitesh,
Thanks for sharing. Currently I have this code "<iframe src="https://player.vimeo.com/video/202108136" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>".
How can I include other browsers such as IE and chrome? Thanks so much.
