[MTWIGS-22] Allow content authors to assign splash image and closed captioning to a video Created: 11/Dec/10 Updated: 06/Jun/11 Due: 18/Dec/10 Resolved: 06/Jun/11 |
|
| Status: | Resolved |
| Project: | Twigs STK Add-ons |
| Component/s: | Magnolia Twigs Module |
| Affects Version/s: | None |
| Fix Version/s: | 1.0.0 |
| Type: | New Feature | Priority: | Neutral |
| Reporter: | Matt Dertinger | Assignee: | Matt Dertinger |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | accessibility, dms, flowplayer, stk, video | ||
| Remaining Estimate: | 3d | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | 3d | ||
| Template: |
|
| Acceptance criteria: |
Empty
|
| Date of First Response: |
| Description |
|
Create a new paragraph model, freemarker scripts, and flowplayer configuration to allow content authors to assign a splash image and closed captioning file to a video asset. The video, image, and closed captioning (XML, srt)files should reside in the DMS. Content authors would:
The paragraph model should get the video, along with the links supplied in the relation1 and relation2 nodes. The freemarker scripts should display the a slash image using the info supplied by the model, and pass the link to the captioning file to the flowplayer configuration. Thanks, |
| Comments |
| Comment by Claudia Guerrero [ 14/Feb/11 ] |
|
Hello, |
| Comment by Matt Dertinger [ 18/Feb/11 ] |
|
Hi Claudia, There has been some work done on this feature, but it's got a bit more work to be done, for instance delegating flowplayer to a fallback for an HTML 5 video player. As a temporary work around you may want to look at the Flowplayer Captions plugin. For your actual captions file, I'd suggest using either Timed Text or SubRip. Now in order for your JavaScript to find your captions file, I'd suggest using a convention. For instance if you store your videos in the dms in a location like this: + mysite
+ img
+ videos
- my-mp4-video mp4
+ xml
- my-mp4-video xml
Then in your init-behavior.js script, you can do something like this (notice how we set the captionUrl property by manipulating the value provided by the anchor elements href attribute, replacing the '/videos', with '/xml' to swap the directories, and '.mp4' for '.xml' to swap the file extensions. If you're using SubRip files, you could do the same thing, you'd just need to modify the script to replace '.mp4' with '.srt'): $('div.video a').each(function() { $(this).flowplayer(contextPath + "/.resources/twigs/swf/flowplayer-3.2.5.swf", { //key: '', version: [9, 115], cachebusting: true, clip: { captionUrl: $(this).attr('href').replace('/videos','/xml').replace('.mp4','.xml'), scaling: 'fit', provider: 'pseudostreaming', // on last second, fade out screen onLastSecond: function() { this.getScreen().animate({opacity: 0.5}, 3000); }, // if screen is hidden, show it upon startup onStart: function(clip) { this.getScreen().css({opacity: 1}); }, // when movie is done, unload movie onFinish: function() { this.unload(); if (this.isFullscreen() && jQuery.browser.msie) { document.body.focus(); } }, // when movie is stopped, unload movie onStop: function() { if (this.isFullscreen() && jQuery.browser.safari) { this.toggleFullscreen(); document.body.focus(); unload = this.unload; setTimeout(function(){eval("unload()")}, 50); } else { this.unload(); document.body.focus(); } } }, plugins: { captions: { url: contextPath + '/.resources/twigs/swf/flowplayer.captions-3.2.3.swf', captionTarget: 'content' }, content: { url: contextPath + '/.resources/twigs/swf/flowplayer.content-3.2.0.swf', bottom: 5, height:40, backgroundColor: 'transparent', backgroundGradient: 'none', border: 0, textDecoration: 'outline', style: { body: { fontSize: 14, fontFamily: 'Arial', textAlign: 'center', color: '#ffffff' } } } } }) }); I'll try to put together a working example and check it in over the weekend. I'll update this issue once complete to let you know. Thanks again for your interest in Twigs. Please feel free to post feature requests. I hope this helps. If you have any other questions please let me know. Cheers, |
| Comment by Matt Dertinger [ 20/Feb/11 ] |
|
Hi Claudia, I checked in the code for a working example. If you'd like to check it out from subversion, you should be able to build it, then copy the module jars to your webapp. Once you have them installed, you'll have a small twigs-demo-project that includes the video, with cc support. I think something like this is what you're after, at lease in the short term. Please let me know if you have any questions. HTH, |
| Comment by Matt Dertinger [ 06/Jun/11 ] |
|
Created separate dialog tab called tabVideoInfo for splash image and cc controls, instead of using relation1 and relation2 fields. |