[Pro] HTML5 video action fullscreen option

Brian_Yun · July 13, 2012, 3:31pm

Is there anyway to add a fullscreen option to the HTML5 action? I’d like for the video to be played fullscreen as well as the smaller version on the page. Like how you are able to in Youtube.

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 13, 2012, 3:38pm

Here’s a Github project that does this in a very neat bit of JavaScript:

As far as adding it to the Action, I didn’t write that one, so I can’t say how it works. You could add this script to your page, and then call it on your movie by adding a button (just a graphic box will do) and observing a click on that button with JavaScript. Is that something you’d like to try? If so, I can take a few moments to work up an example. If you’re looking for something fully realized in the Action, you might want to post a feature request to support(a)softpress.com.

Walter

On Jul 13, 2012, at 11:31 AM, Brian Yun wrote:

Is there anyway to add a fullscreen option to the HTML5 action? I’d like for the video to be played fullscreen as well as the smaller version on the page. Like how you are able to in Youtube.

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Brian_Yun · July 14, 2012, 7:46am

That is pretty cool. So the fullscreen would be activated with a separate button I get. How it would work, I have no clue. If you wanted to try an example, I’d love to check it out and would really appreciate it. Thanks!

Brian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 14, 2012, 4:20pm

I tried working this out using the HTML5 Video Action, and it died horribly in a jQuery/Prototype accident. In testing a replacement, I used my SublimePlayer Action, and discovered that Sublime already has a working full-screen implementation built in, no extra buttons or coding needed! As a bonus, it also results in a valid HTML5 page, rather than a mixture of HTML and HTML5 that the W3C validator scoffs at.

If you really want to proceed with the HTML5 Video Action and your current page (or don’t want to sign up for a free Sublime account, or whatever other reason you may have) you can hand-code a tiny bit of JavaScript to make the full-screen button work like this:

Make your full-screen button as a graphic box, and name it button in the Title field of the Inspector. You can add an extended attribute to it (in the DIV/Style segment) with the Name set to cursor and the Value set to pointer if you want it to appear “clickable” to visitors.
In your Page/HTML Markup dialog, move to the After section of the dialog and paste in this line: <script src="https://raw.github.com/sindresorhus/screenfull.js/master/dist/screenfull.min.js" type="text/javascript"></script>
Click once on your video and make a note (case-sensitive!) of the content of the Title field in the Inspector. This will become the DOM ID you’ll use to find the video, so you need to know it precisely.
Switch to the Before section of the HTML Markup dialog and paste in the following code.

gist.github.com

https://gist.github.com/walterdavis/3111960

gistfile1.html

<script type="text/javascript">
var button = document.getElementById('button');
var movie = document.getElementById('theIdYouWroteDown').
  getElementsByTagName('video')[0];
if ( screenfull ) {
  button.onclick = function(evt){
    screenfull.request(movie);
  });
}
</script>

Here’s where this can break:

You have to get the ID of the movie exactly right, and replace the placeholder text ‘theIdYouWroteDown’ in the script with it.
You have to name your button button in the Title field of the Inspector.
You can only have one movie on the page using this version of the code.

I would seriously recommend SublimePlayer as a replacement, because it provides a much cleaner cross-platform experience than anything else I have seen. The full-screen button is already built into that player, and it looks exactly the same on all platforms and browsers, so there’s no need to add it yourself or add any scripting.

Walter

On Jul 14, 2012, at 3:46 AM, Brian Yun wrote:

That is pretty cool. So the fullscreen would be activated with a separate button I get. How it would work, I have no clue. If you wanted to try an example, I’d love to check it out and would really appreciate it. Thanks!

Brian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 14, 2012, 6:10pm

In looking at this problem, I discovered another player option that does not require any libraries or expose any global variables. This means it is compatible with any combination of JavaScript you choose to add to your page, either directly or through Actions. It’s called VideoJS, and it took me all of 5 minutes to convert the SublimePlayer Action to use it instead. So introducing the VideoJS Action!

http://actionsforge.com/actions/view/265-videojs

Give it a try. Like Sublime, it does the full-screen business for you without any extra coding. Unlike Sublime, you don’t need to sign up for anything. Just convert your video into H264 MP4, and optionally WebM and or Ogg/Vorbis.

Walter

On Jul 14, 2012, at 12:20 PM, Walter Lee Davis wrote:

I tried working this out using the HTML5 Video Action, and it died horribly in a jQuery/Prototype accident.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Brian_Yun · July 15, 2012, 7:02am

Wow. A new action. Just like that. That is fantastic. I downloaded and installed the action, but I can’t find it anywhere in the FW menus. I looked and the action is installed and checked in the edit actions window. Am I just up too late working or am I just blind? I made the graphic item, imported my poster frame and looked through all of the action menus, I just can’t find it.

Thanks Walter!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · July 15, 2012, 12:41pm

You must start with an XHTML Strict or XHTML Transitional page. If your page is set to one of the HTML page levels, change it in the Inspector.

Walter

On Jul 15, 2012, at 3:02 AM, Brian Yun wrote:

Wow. A new action. Just like that. That is fantastic. I downloaded and installed the action, but I can’t find it anywhere in the FW menus. I looked and the action is installed and checked in the edit actions window. Am I just up too late working or am I just blind? I made the graphic item, imported my poster frame and looked through all of the action menus, I just can’t find it.

Thanks Walter!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Brian_Yun · July 15, 2012, 4:35pm

Yep. I had just been working too long and missed the really bold important note so clearly stated in the description about XHTML. I got a video up and playing right away now. Awesome! Thank you so much Walter.

Brian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options