Video Controller Symbol

Template Gallery
1

After looking at html5 video buttons the other day

I thought I would knock together a fully working Controller that could be added to any html video player.

With Hype v3.5 came scaling Symbols. This means you can scale the whole symbol in one go to fit.

Screen Shot 2016-01-04 at 10.50.44.JPG1812×1426 246 KB

( Notes:
You can only run one controller in a project at the moment. I was hopping that just using classNames would allow for multi controllers but nope. ( thought I had used a className trick before to do similar !!).

There are a couple of ways I am in the process of trying and if I get it working so you can use multiple controllers on the same scene or on more than one scene I will update back here.
Also remember you can easily change the source video in the video element using code and the single controller will work with the change so you can have more than one video on a scene and use the same controller.

I found that this works best in Safari. Chrome it works well but the scrubbing is a jumpy also has sound when scrubbing,
Firefox. Lets just say WTF and leave it at that..
)

Any way here it is for you to play with and maybe get some ideas from, which is the main thing.

hype_videoControls_cnmse2.hypesymbol.zip (27.9 KB)

See newer versions below.

3 Likes
2

This is really cool!

It'd be neat if the default state wasn't necessarily hidden - took a bit to realize that it was in fact going to work okay.

Since there needs to be a one-to-one association I'd probably do this via a naming convention on the video and on the symbol instance. They symbol when loaded could look at the element.id passed in and do some manipulation on this to find the video.

3

Thanks,

Sorry about that I did mention it but I will look at adding it as an option instead :smile:

I tried something like that last night fully expecting it to work. But on the second scene it still wanted to control the scene one video.

The way I tried was to add a bit of code to the timecode function which is fired by the symbol at load time.
Because of this the element.id is that of the symbol. I gave each symbol on scene one and scene two unique ids.

Then checked for this in the function with a if clause that chose the id of the video to use.
Did not work..

So I will need to look deeper at the coding because in my mind it should have !!.

4

Darn it, Just realised I had posted the version where I converted everything to use class name. Not a problem but the video class name is the thing to link to the controller not the id. class="hype_video"I have change the wording in the above instructions.

 <video height="447px" class="hype_video">
      <source class="hype_mp4video" src="${resourcesFolderName}/Shakira.mp4" type="video/mp4">
     
    </video>
5

@jonathan, all,

A new version:

Auto hide is off by default.

You can turn Auto hide on by clicking the settings button.

Screen Shot 2016-01-04 at 13.19.09.JPG800×772 75 KB

They AutoHide() function uses the Symbols unique id. This example You need to give the Symbol the id of “vc1”

So the JS can use it to control a timeline.

var vc1 = hypeDocument.getSymbolInstanceById('vc1')

hype_videoControls_cnmse5.hypesymbol.zip (40.8 KB)

2 Likes
6

this is really great! thank you!

1 Like
7

Thanks.

The will be more updates to come. I just finished linking the fullscreen volume controls to the one in the vc. so they match but will wait a bit before posting as I realise there may be some other changes I want…

9

@jonathan, @strmiska, all,

I have managed to figure out:

1,Playing a single video on each scene and with it’s own Video Controller.

2, Playing more than one video on a single scene with one Video Controller, in tests this works but I would need to implement a dropdown menu on the Video control to choose the video to play. I have just done it by hardcoding so far.

The main sticking points are, we need the video class names to choose the videos to play. This is true regardless of if a video is on a different scene. We still have to id the one on the current scene.

This gets more complex if we have more than one video on a scene and we would need a way to choose the video to play. Maybe a dropdown in the v?.

The other sticking point is the auto hide and the new sound listener ( have not posted a version with that in yet but mention it above) need to know which symbol is using them because they are run using symbol timelines.

The Auto hide I probably could get around by just using JS. But the sound listener I cannot since it must use a symbol Timeline, so still need the symbol id.

I have mitigated this by giving the video the className for example hype_video0 and Symbol id hype_video0 .

This cuts down on what to look for and I can use the number on the end as an index which is needed for other elements like the play button to know yes it’s you I want to play and not some other instances.

I am trying to figure out what direction I should go in with this and what to accommodate , my question is first what is the most likely scenario of a scene with vidoe/s.

What do you think that most people would use:

1, a single video on a each scene. ( each scene has one video controller )
2, Multiple videos on Single scene, not in the same element but each video is in it’s own element. ( one video controller )
3, Multiple videos on Single scene and using thumbnails to play them in a single element. ( one video controller )

Any other thoughts welcome…

10

a single video on each scene is by far the most common use. The thumbnail based player is also semi-common but I see that more with images than video typically. Multiple videos using the same controller is less common, but something folks who want to sync two sources use… but it is usually animations synced with video and not two videos.

Perhaps the video could be hype_video0_1_2_3 so you can theoretically define which ones it should control? Like a bonus syntax?

2 Likes
11

The good thing is I can get that to work with no real problems now.

Do you mean hype_video0, hype_video1 and so on for each video. That what I am doing at the mo. Since we need to distinguish between the videos and the Video controllers as even though they would be on different scenes the code will see them all.

Or do you mean 'hype_video0_1_2_3' as a single class name for all the videos.. I should be a sleep right now so forgive me if I am being thick but if you mean that can you explain.. :blush:

1 Like
12

To address the multiple scenes, multiple videos, single controller issue of the first video being the only one controllable - I’m guessing running a function to remove the ‘hype_video’ class on sceneUnload from the current scene’s video would be pointless - as it would apply to all videos utilising the controller?

13

I already have it so you can have one video and one controller per scene.

But I think I am close to having one controller on a scene control multiple videos on the same scene. But still testing so I may find that changes to the code create problems on the current abilities of per scene. Let you know as soon as I have something that looks like it is working…

1 Like
14

Ok I have a version ready now that I thinks solves some of the issues discussed. But can I get a consensus on something.

The Controller will now worksout how many videos are on the current scene. It does this for any video that has the class “hype_mp4video”

It will by default be controlling the first video.

(This means if we have two videos on a scene they are referenced in an array. So video 1 would be item 0 in the array, video 2 would be item 1 in the array since array item numbers start from 0 not 1.)

This means you can have multiple videos on the same scene and a single controller for all of them and/or scenes with a single video and controller.

I have added code that dynamically adds an attribute to the video element. called video_index which will hold i the videos index number. i.e 0,1, 2, depending which video it is on the scene.

I also add a click action to the video which uses this index number to tell the controller which video it is controlling.

This means by simply clicking a video the controller will pause the current video and play the clicked one.
There is also a slide down on the controller to choose a video on the scene to play, which uses all the same functions and code.

My questions is what would people prefer. Both slider and video click or one or the other.
I personally like the video click.

15

Final version for the video controller.

This version is a bit different from the previous one.

Firstly,

The Video controller Symbol no longer needs to have a class name or an id.

The innerHTML Video elements tag MUST have the class name of “hype_mp4video”

Example on the innerHTML of a video element containing the correct classname:

<video height="286px" class="hype_mp4video">
      <source src="${resourcesFolderName}/Shakira.mp4" type="video/mp4">
     
 </video>
  1. The Controller will now workout how many videos are on the current
    scene with that class. And can now play them all.
  2. The Controller has a new button that will list the the current
    scenes videos ( that have the correct class name).
  3. Clicking a video items in the slider will change the controls over
    to that video and start that video
  4. Clicking a video on the scene will change the controls over to
    that video and start that video.
  5. The time code has an added tick gfx.
  6. When sound is changed in full screen mode, the gfx will now also
    change on the controller.

Remember you can scale the controller by holding the command key down and using one of the symbol element’s drag handles

Screen Shot 2016-01-30 at 09.09.09.JPG1938×1740 331 KB

hype_videoControls_10.4.2.final-2.hypesymbol.zip (76.4 KB)

4 Likes
16

Sigh… Small fix on the Auto Hide not hiding the video list fully, forgot to add it’s keyframes on the settings timeline. Updated above.

1 Like
17

Thank You Mark!

18

Small update.
I Noticed that in all the code changes I had done I had broken the pause play button text change in some events.
A simple fix. Updated above.

1 Like
19

Thanks so much for this. Going to be really useful on an upcoming project.

1 Like