Video Fieldtype

[adrian]

Hi everyone,

This new video fieldtype extends FieldtypeFile.

• Video is available via: $page->video_field->url
• Module automatically creates a poster image of the video on upload and makes this available via: $page->video_field->poster
• Shows the duration of the video on the title bar, next to the filesize
• Stores VTT files for subtitles accessed via: $page->video_field->subtitles
• Formats a transcript from the subtitles, accessed via: $page->video_field->transcript

Users can easily upload videos and enter VTT files. The following code is used in the template file.

<video src='{$page->video_field->eq(1)->url}' poster='{$page->video_field->eq(1)->poster}' width='720' height='408' ><track kind='subtitles' src='{$page->video_field->eq(1)->subtitles}' srclang='en' /></video>

Additional Settings

You can additionally set a few different options in the field's Input tab:

• Number of poster images to generate - if you change from the default of 1, the editing user will be able to select which image they want to use for the poster image
• Copy poster image to dedicated image field - not necessary but gives you more options of interacting with the poster image(s)
• Field that you want poster images copied into - only relevant if the option above is checked

Try it out (NB: the code is rough - it works, but needs cleaning up.

Github: https://github.com/adrianbj/FieldtypeVideo

NB: Requirements

The module requires ffmpeg and ffmpeg-php, although I can make the latter optional fairly easily. I don't have any requirement checking implemented yet, so if you don't have these, you'll get php errors.

Possible future enhancements

• Ability to specify what frame is used for the poster - either by number, and/or by offering several options to choose from Done!
• Push poster image to a dedicated image field Done, although could be improved
• Field for pasting in or uploading closed captions Done, but need to look into multi-language options etc
• Support for uploading multiple formats of the same video (mp4, webm, etc) and/or automated video format conversion

My biggest concern, is how useful this will be to people - how many hosts actually have ffmpeg setup? Do any have ffmpeg-php?

Anyone have any ideas for features they'd like to see?

[teppo]

@adrian: this sounds awesome and definitely fits some of our needs just fine.. so thank you very much for working on this!

Regarding ffmpeg and ffmpeg-php, I've just tested two hosts and one had both of those installed. Other host is my Linode VPS which, as expected, didn't (and shouldn't) have them yet.

I don't think this kind of requirement is such a big problem really, especially since this kind of field can IMHO be most useful in slightly larger projects, where getting a proper host shouldn't be an issue. YouTube is just fine for most others.

Have you seen https://github.com/CodeScaleInc/ffmpeg-php, by the way? I can't speak for it's quality as I've never tried it, but it might be worth considering as an option to ffmpeg-php. Probably not a good default though, as a PHP extension would most likely have some advantages, such as speed (C vs. PHP.)

From your feature list "automated video format conversion" sounds like the most important one to me. Unless I'm mistaken, video element only takes us halfway there; visitor's browser still needs to support each video format used and thus conversion + some kind of player sounds like the best option. One system I've been working with has something similar as this, though it by default converts all other formats to FLV and then uses Flowplayer to play those -- this has been in use for years and seems like a solid option.

Anyway, I'll be sure to check your code better as soon as I can. Would love to help somehow, too.

Edit: almost forgot to add that having an optional, built-in player would be a nice addition. Something like the Flowplayer integration I mentioned above, so that $page->video_field->render() would simply output the player. Just saying

Edited September 24, 2013 by teppo

[adrian]

Hey teppo,

Thanks very much for your input.

I hadn't seen that OO port of ffmpeg-php. I'll take a look for sure, although if we end up having this module do format conversions, neither of these options will suffice as they can't convert, so I'll need to revert to exec calls to ffmpeg itself.

Not sure if I am fully understanding your point about specific formats - mediaelementjs (http://mediaelementjs.com/) allows mp4 files to be played on all browsers (desktop and mobile). It uses the browser's HTML5 player if possible and flash for those that don't support it. If you provide it with both mp4 and webm versions, then all browsers can use their native HTML5 players. So if I was going to have the module offer conversion, I was thinking it would only be for converting from whatever gets uploaded into mp4 and maybe also webm. It's my understanding that FLV is no longer a format worth considering. I actually wish webm was better supported, but unfortunately I think at the moment and for the foreseeable future we won't see Apple support it in Safari. The chart of the mediaelementjs site says that Android won't play webm, but it does.

Don't look at that code too closely right now - that initial commit really was put together very quickly and I ended up hacking the thumbnail creation - I couldn't figure out how to create a new Pageimage to use that for the resize, because it needs an image field on the page to work, but I didn't want to make that a requirement, so I just went with standard GD code to resize if the "Display thumbnails in page editor?" is checked. There is probably un-needed code in there still from the FieldtypeFile I started with. 

Hopefully I can find some time in the next few days to tackle some of the simpler enhancements/cleanup.

Definitely appreciate any help you want to give.

[teppo]

@adrian: my information was outdated, I had no idea that mp4 was that widely supported -- forget my comments about FLV

Media conversion still sounds important, as in most cases our clients seem to either a) have video files they got from external source or b) something their recorder / web cam / whatever created.. and in both cases very little (or none at all) idea how to convert those to anything else. It's a shame that ffmpeg-php can't do it.

[apeisa]

Great stuff Adrian. Using cloud service like http://zencoder.com/en/ or http://features.encoding.com/ might be good option too.

[adrian]

No worries teppo - things are always changing - even Flowplayer tries to use mp4 with native html5 players now. 

Unfortunately server-side conversion is a little tricky. ffmpeg can do it fine with exec calls, but that rules out servers with exec disabled, safe mode on etc. 

Antti - not sure about using a cloud service - they are both paid services - maybe if there was a free one available?

Maybe I shouldn't worry about the format conversion at this stage - just make sure people know to only upload mp4s and maybe just make  note that people can download http://www.mirovideoconverter.com/ which is free fore both Mac and Windows versions. I have found it fantastic - clients find it very easy to use - it really is a two click process. Maybe offer the option to also upload a webm version as well (also easy to create with Miro) if they want to make their videos play without a flash container in all browsers.

[teppo]

@adrian: dropping conversions for now sounds like a good idea. I'm most likely going to take a look at the conversion part once I get a chance, as I'm still predicting various issues within our client base, but that's definitely not a requirement for most others.

[adrian]

Ok, A new version has been pushed to GitHub.

This takes care of the first two enhancements mentioned in the first post

There are a few new options in the field's Input tab:

Number of poster images to generate

Images will be captured at intervals from throughout the video. This determines how many will be created. The user can choose which one is available to templates via $page->video_field_name->poster

 

NB - if you change this to more than one (default), I would recommend also checking: "Display thumbnails in page editor?" to keep things looking manageable.

 

 

Copy poster image to dedicated image field?

This will create a copy of the poster images in an image field of your choice. NB This is not necessary for accessing the image.

 

 

Name of the field that you want to have the poster image copied into

This is only relevant if you have the checkbox above checked.

Lots more to do, but thought you might like to see the next iteration. I am not sure on some of the behavior regarding copying all created thumbs to an images field (if selected). It might be better to just copy the one selected by the user. 

Code is still a bit of a mess - want to get features created first, then will clean up.

[adrian]

Back again,

I have implemented support for subtitles (v3 on Github), although I think the route I have gone will be problematic for multi-language versions. I am trying to keep all fields for each video as components of the video field itself. I think this is useful as it allows:

$page->videos->eq(n)->url;
$page->videos->eq(n)->poster;
$page->videos->eq(n)->subtitles;

etc, if the field is set to support more than one file. However, it does reduce the flexibility because the field_video DB table has these matching fields: data, poster, subtitles. I guess add other subtitle languages would require the addition of another field for each language - eg subtitles_xxxx corresponding to the ID of the language. Maybe this is simple to achieve - I'll investigate, but if anyone has any quick tips, that would be great.

Also, not sure what you think about storing the subtitles primarily in a DB field and then writing to the file system. My reasoning came from the ability to index this information for searching the video content.

I am also thinking of having an automated option for outputting a transcript of the video from the subtitles text, available from:

Automated transcript generation from the SRT file is now available (v4) and can be accessed using:

$page->videos->eq(n)->transcript;

Any thoughts?

[adrian]

I have made a few minor tweaks / cleanup, but mostly improved the documentation in the Github readme and also in the first post in this thread, along with some new screenshots showing all the functionality in use.

Will need a bigger chunk of time to deal with the major enhancements etc, but hopefully now you can get a better idea of what it does and it will be a little more user-friendly to test out.

Send me feedback!

[adrian]

Hi everyone,

I want to release this module very soon but would like some feedback.

At the moment it requires ffmpeg-php (http://ffmpeg-php.sourceforge.net/) but unfortunately it hasn't been updated in several years and doesn't work with recent versions of ffmpeg. I am thinking about teppo's suggestion of instead using this one: https://github.com/CodeScaleInc/ffmpeg-php It is more recent at least, although I haven't used it yet. Could I get an idea of who has which one(s) already available on their servers?

Also, I am thinking about including a built-in player. I have been using mediaelementjs, but teppo suggested Flowplayer. Does anyone have any strong opinions on this: 1) whether a player should be included or not, and if so, 2) which player.

[apeisa]

what about sublimevideo?

[adrian]

Sublimevideo does look pretty good actually. I was initially put off with the need to register. Also, I can see the advantages to their tracking of video views etc, but some users might not like that. I do think the CDN approach is great though - one less thing to have to keep updated and of course means no need to include any extra files with this module, so I think it might actually make for a nice default setup. I'll work on the module config to allow you to enter your personal token and provide a video_field->render() method that uses their player. Of course you could still always use your own player using the various components like I outlined in the first post.

Will be back with something implementing this soon.

[adrian]

Ok, I have added support for rendering the video in a Sublime Video player with:

echo $page->video_field->eq(0)->play;

Just register at sublime and enter your token on the config settings page of this module and that's it.

I am not sure I am convinced about Sublime at the moment. I like the idea of a CDN approach to including the required file, but you can get mediaelementjs and other libraries through services like: http://www.jsdelivr.com/#!mediaelement

Admittedly there is a lot more to include this way though.

I think the main thing that puts me off about Sublime is how the process they take you through is designed to set up each video separately. Certainly you can just get the token for your domain and forget about the rest, but I would like it to be simpler.

I have pushed this version to github, although I think maybe I should have made a separate branch - oh well.

I am contemplating the idea of supporting several different players. Any thoughts on this, or how this new version of the module works?

[uiui]

I just installed the plugin and am experiencing a problem concerning the allowed file types. Only pdf, doc, docx, xls, xlsx, gif, jpg, jpeg and png are permitted, which is odd for a video field. Does anyone else have this?

[adrian]

@uiui - Sorry you are having troubles.

I just tested and the only allowed filetype is mp4 (which is correct). I am wondering if perhaps you converted an existing files field to a video field?

If so you will need to manually change the valid file extensions on the Details tab. Either that or add a new Video field from scratch.

Please let me know if that takes care of things for you.

Also, please note that the built-in ->play() uses the Sublime video player which is no longer available. At some point I may add built-in support for another (or several) players, but for the moment you will need to provide the player for the front-end yourself.

I like http://mediaelementjs.com/ but there are lots of others.

[uiui]

Thank you for your reply and of course your module. You were right, after recreating the field, everything works just fine.

[felix]

I would love to have a possibility to embed videos via CKEDITOR the same way images are embedded (instead of shortcodes). This would be so much easier (i mean: after all video is just another html tag). Any plans on doing this?

If you ain't got time / plans to do this I'd be happy to help you with it (I thought about building this as a module for quite a long time).

[MuchDev]

I would love to have a possibility to embed videos via CKEDITOR the same way images are embedded (instead of shortcodes). This would be so much easier (i mean: after all video is just another html tag). Any plans on doing this?

If you ain't got time / plans to do this I'd be happy to help you with it (I thought about building this as a module for quite a long time).

You mean like this?

http://modules.processwire.com/modules/textformatter-video-embed/

[felix]

Not exactly. I've build something like this already (textformatteroembed). I'm talking about a dedicated video button inside ckeditor that can also be used for self hosted videos.

[adrian]

I would love to have a possibility to embed videos via CKEDITOR the same way images are embedded (instead of shortcodes). This would be so much easier (i mean: after all video is just another html tag). Any plans on doing this?

If you ain't got time / plans to do this I'd be happy to help you with it (I thought about building this as a module for quite a long time).

Hi Felix,

This sounds like a great idea - I am pretty limited on time at the moment, so a PR would be awesome. I am thinking that it shouldn't be too hard to put together by borrowing from Ryan's PWImage button and maybe looking at how teppo added a new button to CKEditor with his Hanna Code Helper: http://modules.processwire.com/modules/hanna-code-helper/

Perhaps with the time I have available I should sort out removing of sublime video (since they are now dead). As a replacement I would like to make it possible to link to your preferred player (via a provided CDN link) and then provide the required code for playing, eg if you like using mediaelementjs, you'd define like this:

<video src='{url}' poster='{poster}' width='720' height='408' ><track kind='subtitles' src='{subtitles}' srclang='en' /></video>

Your embed button would make use of these two config settings: 1. CDN Link, 2. Play code (replacing the {} parts with the correct values from the selected video.

It would be great to add these features and actually release this module in the PW modules directory.

What do you think?

[felix]

Okay. I'll have a look into those modules.

P.S.: Don't expect any PRs in the next days - it will take a while as I'm pretty limited in time, too (I'll do this in my spare time when my family is asleep )

[Zahari M.]

Great looking module, Adrian!

Question for all you clever gents here....

Has anyone here installed ffmpeg and ffmpeg-php inside MAMP PRO on their Macs?

I would love to install them such that they work with MAMP PRO but I have no idea where they both actually go!

Any help would be muchly appreciated!

Thanks!

[adrian]

Hi Zahari,

This module should be getting a facelift soon - I'll be getting rid of the Sublime player and setting up mediaelementjs by default, but also making it very easy to switch to VideoJS, Plyr, JW Player - whatever you want really.

I haven't installed ffmpeg-php on a Mac - only on my Linux box, but do these instructions help: https://www.drupal.org/node/1464236

[adrian]

@felix and everyone I have made some initial adjustments to make this module more versatile. It now has two config fields for setting up the JS video player of your choice and the player template code. By default it comes configured to use MediaElementJS, but you can easily change to VideoJS, JW Player, Plyr.io or whatever you prefer.

Once configured all you need to do is: 

echo $page->video->play;

With the default setup, you only need to upload an MP4 and it will work on all browsers/devices. I might potentially make it possible to also upload a WebM version so that you can play with HTML5 in all browsers/devices without the need for a fallback flash player on FF/Chrome, but I'll see if people really have a need for this.

I would still like to make several refinements, but if anyone tests this version, please let me know how it goes.