flvPlayback, captioning and multiple sources

[aoironeko]

Hello and help

In a nutshell:
I have a flvPlayback component on stage, and I have actionscripted it so that when the user clicks a thumb on a menu, the source of the flvPlayback changes. This way I play a selection of videos on demand. So far - so good.

I have a flvPlaybackCaptioning component on stage as well. Is it possible to change the source of the captioning component together with the new source for the video component? Somehow I can't even get it to appear... let alone change captions as per video.

I read a help article that says I should have an array of sources for the flvPlayback, and then a separate flvPlaybackCaptioning component for each separate video. Is this really the only way (thus making me change all my code)?

[godprobe]

I know this is kind of an old post and so probably not really going to help you much, but I'm answering it anyway because the same problem was driving me nuts and it was frustrating to not have this answered when I found this post in a Google search.

I've only been coding ActionScript or using Flash for about three or four weeks now, so some of this may be n00bish, but here's what I ended up doing...

// part of my problems with this may have been because I was only testing things with two captioning XML files... a "blank" Timed Text captioning XML file and another that actually had captions in it... still, if you happen to have two videos using the same caption XML file, this should bullet-proof it.

-----

I just have one main script on the first layer of my FLA movie file.
I'm publishing this as an AIR app using AS3.

I have an FLVPlayback object, which I'll call "presentation" here.
I have an FLVPlaybackCaptioning object, which I'll call "presentationCaptioning" here.
and I also have a multiline dynamic text object, which I'll call "presentationCaptions" here.

-----

When the program starts, I immediately set the .source property of the FLVPlayback object.
presentation.source = "example.flv";

I also immediately set the .source property of the FLVPlaybackCaptioning object.
presentationCaptioning.source = "example.xml";

I'm using a basic Timed Text xml file for the captions so far -- haven't tested anything else.

I don't know why its necessary for me to set the source properties when the app starts (since they *are* specified in the Parameters of each), but if I don't, the video and captions don't appear to load. All other parameters pretty much follow those of other tutorials so I'll leave them out in a marginal attempt at brevity.

-----

later on in my program, different things trigger a new video/caption set. the triggers so far are previous/next arrows and also the video ending will trigger the next video in the series. all the triggers do is set index values for reference in an XML doc (not the caption XML). then I run an update function that uses the index values to load the proper video/caption set.

so here are the relevant steps that happen in the update function...

-----

// load up some other arbitrary XML captioning doc (don't know why, but this seems necessary or else the new captions won't display at all)... I use one called "blank" that has one line of captioning in it... a blank line.

presentationCaptioning.source = "blank.xml";

// toggle off, toggle on... why? again, I don't know exactly why but if there was a caption on the screen when the video switched, it remains there until the time on the new video that corresponds to the time on the old caption has passed... so if you have your first caption and it's "O" and you switch to the next video, then you'll have "O" above "O"... switch to the next video while that's displayed... "O" above "O" above "O"... really annoying... (this may have been due to using the same caption xml file for all my videos in testing... not sure)

presentationCaptioning.showCaptions = false;
presentationCaptioning.showCaptions = true;

// set the new caption source

presentationCaptioning.source = "newCaptions.xml";

// set the new video source

presentation.source = "newVideo.flv";

[wvxvw]

package
{
    import fl.video.CaptionChangeEvent;
    import fl.video.FLVPlayback;
    import fl.video.FLVPlaybackCaptioning;
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.events.Event;
    
    public class FLVPlaybackCaptioningExample extends Sprite
    {
        public function FLVPlaybackCaptioningExample()
        {
            super();
            player.skin = "SkinOverAllNoCaption.swf";
            player.skinBackgroundColor = 0x666666;
            player.skinBackgroundAlpha = 0.5;
            player.autoPlay = false;
            player.addEventListener(Event.COMPLETE, playCompleteHandler);
            captioning.flvPlayback = player;
            captioning.autoLayout = false;            
            captioning.addEventListener(CaptionChangeEvent.CAPTION_CHANGE, onCaptionChange);
            setVideoAndCaption("http://www.helpexamples.com/flash/video/caption_video.flv",
                                "http://www.helpexamples.com/flash/video/caption_video.xml");
        }
        
        private function setVideoAndCaption(videoPath:String, captioningPath:String):void
        {
            player.seek(0);
            player.source = videoPath;
            captioning.source = captioningPath;
            player.play();
        }
        
        private function playCompleteHandler(event:Event):void
        {
            setVideoAndCaption("http://www.helpexamples.com/flash/video/caption_video.flv",
                                "http://www.helpexamples.com/flash/video/caption_video.xml");
        }
        
        private function onCaptionChange(event:CaptionChangeEvent):void
        {
            var tf:* = event.target.captionTarget;
            var player:FLVPlayback = event.target.flvPlayback;
            tf.y = 210;            
        }
    }
}

Set this for the document class of your FLA and place instance of FLVPlayBack component on the stage, call it "player". Place FLVPlaybackCaptioning component on the stage, call it "captioning". Should work...

[minimonster]

From this site: http://www.adobe.com/devnet/flash/ar..._playlist.html
she has a sample file - Dynamic video playlist.

How do I combine her code with yours since I have multiple videos with captioning. how should I do it? I am pretty new on flash and as3. Please help.

[cdclark707]

I'm in the same boat as you are, @minimonster. I'm using the flv player at http://www.adobe.com/devnet/flash/ar..._playlist.html, and would like to add closed captioning for each of the videos... unfortunately, I haven't found a tutorial anywhere that has a step-by-step on how to do this (especially for a Flash newbie like me).

Anybody out there with a big brain and a big heart willing to help us out here?

Thanks.

Carol

[wvxvw]

All you need is to "restart" the player by calling seek(0) (this places the play head on the first frame of the video), assign a new source path to the video and captions and you're good to go. There's not much above that, really...
I'll redirect your comment on the devnet to feature requests though.

[cdclark707]

@wvxvw, I hate to be such a newbie, but here's the deal... I have no clue what to do with "All you need is to "restart" the player by calling seek(0)". How do I do that, exactly?

I see the great AS code you gave us here on the 6th, but I don't think I can just add it to the AS code I already have from the flv player I mentioned in my first post. Here's what I'm working with now:

This is VideoPlaylist.as:

package {
import flash.display.MovieClip;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import fl.controls.listClasses.CellRenderer;
import fl.controls.ScrollBarDirection;
// 'VideoPlaylist' below, is the class called from the 'Document Class' field in the properties palette in VideoPlaylist.fla.
// This simply declares the class in this actionscript file and defines the properties of the xml file and the playlist properties.
public class VideoPlaylist extends MovieClip {
private var xmlLoader:URLLoader;
public function VideoPlaylist():void {
// Load the playlist file, then initialize the media player.
xmlLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, initMediaPlayer);
//this defines what xml file is being used for the video playing and the description. Note, that if you are using streaming
//video you should change this to the 'playlist-streaming.xml' file.
xmlLoader.load(new URLRequest("playlist-streaming.xml"));
// Format the tileList, specify its cellRenderer class.
//dimensions of each playlist item
tileList.setSize(243, 280); // (width, height), this will increase the width and height of the actual playlist / tileList
tileList.columnWidth = 380;
//height of each playlist item. If you changed the thumbnail size to a larger size, you'll probably want to change this to
//a higher number to make the playlist item taller to accomodate the larger thumbnail
tileList.rowHeight = 45;
//scrolling direction of the playlist (VERTICAL, or HORIZONTAL)
tileList.direction = ScrollBarDirection.VERTICAL;
tileList.setStyle("cellRenderer", Thumb);
//if you want different size thumbnails just simply create new size .jpg or .gif image and update the xml file path as below on the next line here:
// thumbnail="thumbnails/batman.jpg" />
}

public function initMediaPlayer(event:Event):void {
var myXML:XML = new XML(xmlLoader.data);
var item:XML;
for each(item in myXML.vid) { // populate playlist.
// Get thumbnailnail value and assign to cellrenderer.
var thumbnail:String;
if(item.hasOwnProperty("@thumbnail")>0) thumbnail = item.@thumbnail;
// Send data to tileList.
tileList.addItem({label:item.attribute("descriptio n").toXMLString(),
data:item.attribute("src").toXMLString(),
source:thumbnail});;
}
// Select the first video.
tileList.selectedIndex = 0;
// Listen for item selection.
tileList.addEventListener(Event.CHANGE, listListener);
// And automatically load it into myVid (myVid is instance name of FLVPlayback video player on the stage in VideoPlaylist.fla. 'tileList' is the instance name of the playlist on the stage.)
myVid.source = tileList.selectedItem.data;
// autoPlay or not autoPlay is what the line of code does below, if you don't want to set this feature in the component inspector for the
// FLVPlayback video player on the stage in VideoPlaylist.fla

//myVid.pause();
}
// Detect when new video is selected, and play it
function listListener(event:Event):void {
myVid.play(event.target.selectedItem.data);
}
}
}


This is Thumb.as:

package {
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ImageCell;
import fl.controls.TileList;
import flash.text.*;

public class Thumb extends ImageCell implements ICellRenderer {
private var description:TextField;
private var textStyle:TextFormat;

public function Thumb() {
super();

loader.scaleContent = false;
useHandCursor = true;

// set skins from library in fla file, no need to change
setStyle("upSkin", ThumbCellBg);
setStyle("downSkin", ThumbCellBg);
setStyle("overSkin", ThumbCellBgOver);

setStyle("selectedUpSkin", ThumbCellBgSelected);
setStyle("selectedDownSkin", ThumbCellBgSelected);
setStyle("selectedOverSkin", ThumbCellBgSelected);

// Load and style the description text
description = new TextField();
description.autoSize = TextFieldAutoSize.LEFT;
// x position of description text (left and right)
description.x = 70;
// y position of description text (up and down)
description.y = 2;
//width of description text
description.width = 150;
//does the text have more than one line or not
description.multiline = true;
//does the text wrap or just continue in one line
description.wordWrap = true;
addChild(description);



textStyle = new TextFormat();
//format / style the font of the description text
textStyle.font = "standard 07_64"; //font
textStyle.color = 0xCCCCCC; //color
textStyle.size = 8; //size
}

override protected function drawLayout():void {
var imagePadding:Number = getStyleValue("imagePadding") as Number;
//position of thumbnail image (x, y)
loader.move(0, 0);
//if you want different size thumbnails just simply create new size .jpg or .gif image and update the xml file path as below on the next line here:
// thumbnail="thumbnails/batman.jpg" />

var w:Number = width-(imagePadding*0);
var h:Number = height-imagePadding*0;

if (loader.width != w && loader.height != h) {
loader.setSize(w,h);
}

loader.drawNow();

description.text = data.label;
description.setTextFormat(textStyle);

background.width = width+0;
background.height = height+0;
textField.visible = false;
}
}
}


This is playlist-streaming.xml:

<?xml version="1.0" encoding="UTF-8"?>

<playlist id="name of my playlist" >

<vid description="NAME OF VIDEO THAT APPEARS IN THE PLAYLIST"
src="rtmp://etc"
thumbnail="http://etc.gif" />

<vid description="NAME OF VIDEO THAT APPEARS IN THE PLAYLIST"
src="rtmp://etc."
thumbnail="http://etc.gif" />

<vid description="NAME OF VIDEO THAT APPEARS IN THE PLAYLIST"
src="rtmp://etc"
thumbnail="http://etc.gif" />

</playlist>


I'm not sure what my captions-for-each-video.xml file setup should look like, since I've seen several (but only for one video), but here's one:

<tt xml:lang="en" xmlns="http://www.w3.org/2006/10/ttaf1" xmlns:tts="http://www.w3.org/2006/10/ttaf1#style">
<head>
</head>
<body tts:extent="400px 300px" xml:id="b1">
<div xml:id="d1" begin="1s" dur="2s">
<p xml:id="p1" region="r1">This is an example of a flyover caption.</p>
</div>
<div xml:id="d2" begin="3s" dur="2s">
<p xml:id="p2" region="r1">Captions can be customized and set to stay on the screen for a specified time.</p>
</div>
<div xml:id="d3" begin="6s" dur="2s">
<p xml:id="p3" region="r1"><![CDATA[They can, display HTML, like this <b>bold text</b>.]]></p>
</div>
<div xml:id="d4" begin="8s" dur="2s">
<p xml:id="p4" region="r1"><![CDATA[Or like <a href="http://www.bestapproach.com/">this link</a>.]]></p>
</div>
</body>
</tt>

Any help you could give me (and all the other folks out there who are just trying to add closed captioning to each video in a playlist) is greatly appreciated.

Carol

[minimonster]

WE ARE ON THE SAME BOAT
i sort of understand what he means I guess: player.seek(0). but for this "assign a new source path to the video and captions and you're good to go." I don't quite know how to assign a new sorce path since we have multiple files. I tried to use case(video2), captioning.source = captions/video2.xml and case(video3), captioning.source = captions/video3.xml
but it doesn't work...
I thought I could add the caption link to this:
<vid description="NAME OF VIDEO THAT APPEARS IN THE PLAYLIST"
src="rtmp://etc"
thumbnail="http://etc.gif"
captions = "captions/etc.xml/>

but it doesn't work either. can anyone help us? I have been tried for almost 2 weeks...

[starofriches]

Has anyone found an answer to this? I'm also looking to caption videos in a playlist and don't understand how to do this.

Thank you!