Filter | Videoeasy

Filter | Videoeasy

by Derek Chirnside -
Number of replies: 11

I was posting in another thread, but an FLV file seems to be playing up there.  I've installed Videoeasy.

It's great.

I have a standard size of video I'd like to use in an induction course.  

So I have created a second template, Flowplayer2, changing the ration and the height/width


This seems to work, and creates a nice looking video frame the right size:


So, I can easily resize things. 

Meanwhile:

  1. Is there any way to get this to show the thumbnail image from the video??
  2. Or: Is there any way to choose the image so I don';t get those darker areas on both sides?
  3. [Or: Is there a way to insert an image, link the image to the video and then to have it played embedded - if I do this it opens in another page?
    EDIT: Solved - Found this in the help notes here: https://moodle.org/plugins/view/filter_videoeasy ]


ASIDE:

The reasons for (3) above is that I have not been able to get the thumbnail to be consistent.  I've created these video clips with Camtasia, sometimes inheriting an MP4 from Adobe Premiere, and then adding a title slide in Camtasia and it just does not seem to choose the first frame as the thumbnail.  eg https://feedback.techsmith.com/techsmith/topics/how_to_make_the_first_frame_of_the_video_the_thumbnail_image_in_camtasia_8


Average of ratings: -
In reply to Derek Chirnside

Re: Filter | Videoeasy

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Good work on the template. That looks good.

Regarding Flowplayer. Flowplayer has some nifty features for loading videos on demand. So you can have a hundred videos on the page and not load them all up at once, and the others all stop when one of them is playing. yada yada. That is what the VideoEasy Flowplayer template is made to do. But it can do first frame of video too. Just check the first example on the flowplayer docs here:

https://flowplayer.org/docs/setup.html

If you setup a second flowplayer template (ala flowplayer2 ) with that config, you could get the first frame as thumbnail/splash.

Average of ratings: Useful (3)
In reply to Justin Hunt

Re: Filter | Videoeasy

by Derek Chirnside -

Justin

This is remarkably complex.  With great complexity comes great power.  Cool!!  It has taken me a few reads and I'm only slowly getting it.

Small question: exactly which part is the 'First example' you are referring to?  is it this: https://flowplayer.org/standalone/basics/poster.html

I can see exactly what is good here: Looking at the code I'm still struggling to figure out what is a scripting job, and what goes in CSS when I convert this to the Moodle setting.

ie is there a way in Moodle Atto I can specify the poster image on a case by case basis.  Can I use any variables in Moodle from thje list in Videoeasy to configure the player?

And if you do make it to Christchurch, I'll take you out to the Volstead.  http://www.volstead.co.nz/  11 boutique beers on tap.  They have got a new coffee supplier as well, and so their coffee is also looking up.

-Derek

Average of ratings: -
In reply to Derek Chirnside

Re: Filter | Videoeasy

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

The flowplayer settings on that page are complex!  Whats a poster and whats a splash? The first example, that I referred to looked like this:

<div class="flowplayer">
   <video>
      <source type="video/webm" src="http://mydomain.com/path/to/intro.webm">
      <source type="video/mp4"  src="http://mydomain.com/path/to/intro.mp4">
   </video>
</div>

Specifically this is supposed to load the first frame of the video as the poster image. This would just be in the template area itself. Something like this

<div class="flowplayer">
   <video>
      <source type="video/mp4"  src="@@VIDEOURL@@">
   </video>
</div>

To make sure that I was not putting you crook, I tested that. It worked fine. But I had to also add a CSS min-width / min-height in the custom css area. That looked like: .
.flowplayer {min-width: 800px; min-height: 600px;}


If you wanted to upload a poster for each video. I would give the poster image the same filename as the video, but just with a different extension. eg verygoodvideo.mp4 and verygoodvideo.png ,

Then you could use the default flowplayer template that bundles with VideoEasy, and just change the DEFAULTPOSTERURL to AUTOPOSTERURLPNG  ... like this:

<div>

<div id="@@AUTOID@@"

style="max-width: @@WIDTH@@px; background-color:#777; background-image:url(@@AUTOPOSTERURLPNG@@);"

class="flowplayer videoeasy-flowplayer">

</div>

</div>

You would then upload the video and the poster image to the html area, and set the image width and height to 0 in the image dialog (ie when it asks you for alt tags etc). That way the picture would not show on its own, but the url would still work for Flowplayer to pick it up and display it as a poster image.

(Beer in Christchurch brings back memories of sports trips up there from my scarfie days. Its a bit out of my way .. but who knows ...)

Average of ratings: Useful (1)
In reply to Justin Hunt

Re: Filter | Videoeasy

by Derek Chirnside -

OK, thanks Justin, I tried and failed.  Using your guide, aiming to take the first frame as a poster, I tried this:

Template

<div>
<div id="@@AUTOID@@" style="max-width: @@WIDTH@@px; background-color:#777;" 
class="flowplayer videoeasy-flowplayer">
<video>
   <source type="video/mp4" src="@@VIDEOURL@@">
</video>
</div></div>

Custom CSS

.flowplayer {min-width: 800px; min-height: 600px;}

I wondered in your trial whether you used a page and not a label, so I tried both.

I have never managed to get a frame from the video as a poster ever.

I'm getting a setup where it seems to ignore the size: it appears much bigger than the defaults

WIDTH=480,HEIGHT=270

And for completeness only y\two small tweaks to template, ratio and delete reference to splash:

$(function () {$("#" + "@@AUTOID@@").flowplayer({
playlist: [
 [
  { mp4:     "@@VIDEOURL@@" }
 ]
],
ratio 27/48,
}); 
});

Will try your second option tomorrow.

PS: I also had a look at the Generico video thumbnail.  I can find not help on it.  What do I do with the video?  There are only three text fields in the plugin in ATTO.

-Derek


Average of ratings: -
In reply to Justin Hunt

Re: Filter | Videoeasy

by Derek Chirnside -

Success with the poster image.

Template

<div><div id="@@AUTOID@@" style="max-width: @@WIDTH@@px; background-color:#777; background-image:url(@@AUTOPOSTERURLPNG@@);"class="flowplayer videoeasy-flowplayer"></div></div>

Script

$(function () {$("#" + "@@AUTOID@@").flowplayer({
playlist: [
 [
  { mp4:     "@@VIDEOURL@@" }
 ]
],
(removed BOTH lines here)
}); 
});

If I changed the ratio to 27/49 it failed with the postbox effect.

So I deleted the ratio line.

Size of video is smaller with editing ON by about 30%

Video does not return to poster image on completion

But it's the best deal so far.  smile

-Derek


Average of ratings: -
In reply to Derek Chirnside

Re: Filter | Videoeasy

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I am glad you got some success. You are turning into the Video Easy Poster Boy.

An example in Flowplayer of using the first frame of the video is here:

http://demo.poodll.com/mod/page/view.php?id=189

If you login as admin you can see the template from the settings.

It was quite tough battling with Flowplayer over the width. Due to responsiveness it wants to be 100%. The trick was setting the outer div to "display: inline-block"




Average of ratings: -
In reply to Justin Hunt

Re: Filter | Videoeasy

by Derek Chirnside -

Summary Post.  Poster image + Videoeasy.

I have got Videoeasy + Clean + Flowplayer + MP4 working well for setting your own size of the video player and a nice poster image.   This is a summary of what I did and is following the help Justin's posts in this thread.

First, read the help on Justin's site.

  1. In Site Filters > Videoeasy . . .   in a new template, clone the Flowplayer template, eg  with a new name like flowplayer2
  2. Template changes:
    1. Delete the ratio and splash lines from the template
    2. Make the change in the template to AUTOPOSTERURLPNG.
  3. Set the width and height that you want in the defaults
  4. Create a poster image, with the same name as the video, with png extension.  I made it the same size as the resolution of the video.  
  5. Add it to your page setting the height and width to zero
  6. At site (Videoeasy setup) or course level (Filters > Videoeasy settings), you need to set the MP4 player to flowplayer2
  7. Tips:
    1. Clearing caches is essential, sometimes one or two times
    2. Problems?  You may need to check the HTML view to check the image is in the right place.  Sometimes I think with Atto I dragged the image inside the > symbol.
    3. ??  
  8. Notes:
    1. Creating your video without having one pixel lines at the sides or top can be a challenge if you are an amateur.
    2. You probably could set the size with a ?d= in the code.

This is still not working for me with the Decaf theme sadly.  But it is progress.

THANKS JUSTIN.

Next step: to get the "Choose the first frame" option to work.

-Derek


Average of ratings: Useful (1)
In reply to Derek Chirnside

Re: Filter | Videoeasy

by Derek Chirnside -

I think I have ended up in a Catch 22.

Is there any way to set the filters for a Label?

It seems that page resource works OK, you can set the filter at that level.

What I want is to be able to display videos in a section that look good.  The problem with this is I have to set thefilters at a course level.

Is there a work around?

-Derek

Average of ratings: -
In reply to Derek Chirnside

Re: Filter | Videoeasy

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

You can set the filters at label level too. 

If you look at the settings block for the label, you will see "filters." Click that and you will see options to turn on and off filters, and in the case of VideoEasy a settings link where you can assign a non default template/player to a file extension.

Or do you mean something else?

Average of ratings: -
In reply to Justin Hunt

Re: Filter | Videoeasy

by Derek Chirnside -

Ahh, Do'h!  Yes, look for the Label administration when you are editing the label.

Thanks.,

-Derek

Average of ratings: -