[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:

  1. upload their video to the DMS
  2. in the meta info tab, add the link to the slash image to the relation1 node
  3. in the meta info tab, add the link to the closed captioning file to the relation2 node

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,
Matt



 Comments   
Comment by Claudia Guerrero [ 14/Feb/11 ]

Hello,
We are very interested in the captioning feature. I understand that there is already work being done for this feature request.
Does the feature have an estimated delivery date? Or is there a way to modify the current flowplayer script in the latest version of Magnolia to add the captions, as a temporary workaround?
Thank you,
Claudia Guerrero

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,
Matt

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,
Matt

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.

Generated at Mon Feb 12 11:07:35 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.