Copy link to clipboard
Copied
H everyone, trying to get a seekbar to work in my youtube chromeless player in actionscript 3, I've tried to add it with this code but I'm getting a syntax error here: function player.seekTo(seconds:Number, allowSeekAhead:False):Void. The error is 1084: Syntax error: expecting leftparen before dot.
I've tried to work with the Youtube API on this but struggling to use their documentation to get it to work.
The only bit they have about a seek bar is this:
player.getClickToPlayButton(videoId:string, startSeconds:Number, suggestedQuality:String):DisplayObject
videoId
parameter identifies the video associated with the new button. The button is skinned with the video's hqdefault
thumbnail image. Since the button displays the video's thumbnail image, the application does not need to retrieve the video thumbnail image URLs using the YouTube Data API.startSeconds
parameter accepts a float/integer and specifies the time from which the video should start playing when the button is clicked. If specified, the video will start from the closest keyframe to the specified time.suggestedQuality
parameter specifies the suggested playback quality for the video. Please see the definition of thesetPlaybackQuality
function for more information about playback quality.
I'm not even sure if I've added it correctly, can someone help me out? Thanks
Below is the code I've tried out:
player.seekBar = seekTo;
function player.seekTo(seconds:Number, allowSeekAhead:False):Void
{
if (player)
{
player.seekTo();
}
}
Copy link to clipboard
Copied
are you publishing for as3 or as2?
Copy link to clipboard
Copied
actionscript 3
Copy link to clipboard
Copied
then Void needs to be void.
and
function player.seekTo
makes no sense. remove that code and retest.
Copy link to clipboard
Copied
Done that and its thrown up several syntax errors:
1084: Syntax error: expecting identifier before leftparen.
1084: Syntax error: expecting leftparen before leftbrace.
1084: Syntax error: expecting identifier before leftbrace.
1084: Syntax error: expecting rightparen before leftbrace.
Thanks anyway!
Copy link to clipboard
Copied
copy and paste your corrected code.
Copy link to clipboard
Copied
player.seekBar = seekTo;
function (seconds:Number, allowSeekAhead:False):void
{
if (player)
{
player.seekTo();
}
}
Copy link to clipboard
Copied
delete all of the following from your original code:
function player.seekTo(seconds:Number, allowSeekAhead:False):Void
{
if (player)
{
player.seekTo();
}
}
Copy link to clipboard
Copied
Thanks, the code now compiles correctly but the seekbar doesn't work, there's no moving playhead and I can't change the position on it, any ideas?
Copy link to clipboard
Copied
do you have an flvplayback component on stage named player?
do you have a custom seekbar named seekTo on stage?
Copy link to clipboard
Copied
I don't, I built the player in reference to Google's provided API and I'm unsure of the flvplayback component part. Here is my full code, hopefully you can see where I've gone wrong from this!
import flash.system.Security;
import flash.net.NetStream
Security.allowInsecureDomain("*");
Security.allowDomain("*");
// This will hold the API player instance once it is initialized.
var player:Object;
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
function onLoaderInit(event:Event):void {
addChild(loader);
loader.content.addEventListener("onReady", onPlayerReady);
loader.content.addEventListener("onError", onPlayerError);
loader.content.addEventListener("onStateChange", onPlayerStateChange);
loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
}
function onPlayerReady(event:Event):void {
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);
// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
player = loader.content;
player.cueVideoById("FDbP71p4W4g");
player.setSize(640, 360);
player.x=20;
player.y=30;
}
function onPlayerError(event:Event):void {
// Event.data contains the event parameter, which is the error code
trace("player error:", Object(event).data);
}
function onPlayerStateChange(event:Event):void {
// Event.data contains the event parameter, which is the new player state
trace("player state:", Object(event).data);
}
function onVideoPlaybackQualityChange(event:Event):void {
// Event.data contains the event parameter, which is the new video quality
trace("video quality:", Object(event).data);
}
function createFeaturedButtons(player:Object, featuredVideos:Array) {
var results:Array = [];
for each (var id:String in featuredVideos) {
results.push(player.getClickToPlayButton(id));
}
return results;
}
function playVideo(e:MouseEvent):void
{
if (player)
{
player.playVideo();
}
}
playBtn.addEventListener(MouseEvent.CLICK, playVideo);
function pauseVideo(e:MouseEvent):void
{
if (player)
{
player.pauseVideo();
}
}
pauseBtn.addEventListener(MouseEvent.CLICK, pauseVideo);
function muteVideo(e:MouseEvent):void
{
if (player)
{
player.mute();
}
}
muteBtn.addEventListener(MouseEvent.CLICK, muteVideo);
function unMuteVideo(e:MouseEvent):void
{
if (player)
{
player.unMute();
}
}
unMuteBtn.addEventListener(MouseEvent.CLICK, unMuteVideo);
Thanks for your time, it's really appreciated
Copy link to clipboard
Copied
Here is something to get you started. Code below implements a primitive seek bar based on your code. You will need to replace this seek bar objects with yours and adjust calculations based on your specifics.
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.geom.Rectangle;
import flash.system.Security;
import flash.utils.Timer;
Security.allowInsecureDomain("*");
Security.allowDomain("*");
var seekBarWidth:Number = 600;
var seekBar:Sprite;
var seekHead:Sprite;
var progressTimer:Timer;
drawSeekBar();
initTimer();
// This will hold the API player instance once it is initialized.
var player:Object;
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
function drawSeekBar():void
{
seekBar = new Sprite();
seekBar.graphics.lineStyle(2);
seekBar.graphics.moveTo(0, 0);
seekBar.graphics.lineTo(seekBarWidth, 0);
drawSeekHead();
}
function drawSeekHead():void
{
seekHead = new Sprite();
seekHead.graphics.beginFill(0xff0000);
seekHead.graphics.drawCircle(0, 0, 7);
seekBar.addChild(seekHead);
seekHead.mouseEnabled = true;
seekHead.buttonMode = true;
seekHead.useHandCursor = true;
seekHead.addEventListener(MouseEvent.MOUSE_DOWN, startSeek);
}
function startSeek(e:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, stopSeek);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
seekHead.startDrag(true, new Rectangle(0, 0, seekBarWidth, 0));
progressTimer.stop();
}
function onMouseMove(e:MouseEvent):void
{
player.seekTo(player.getDuration() * seekHead.x / seekBarWidth);
e.updateAfterEvent();
}
function stopSeek(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, stopSeek);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
seekHead.stopDrag();
progressTimer.start();
}
function initTimer():void
{
progressTimer = new Timer(50);
progressTimer.addEventListener(TimerEvent.TIMER, updateSeekBar);
}
function updateSeekBar(e:TimerEvent):void
{
seekHead.x = seekBarWidth * player.getCurrentTime() / player.getDuration();
e.updateAfterEvent();
}
function onLoaderInit(event:Event):void
{
addChild(loader);
loader.content.addEventListener("onReady", onPlayerReady);
loader.content.addEventListener("onError", onPlayerError);
loader.content.addEventListener("onStateChange", onPlayerStateChange);
loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
}
function onPlayerReady(event:Event):void
{
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);
// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
player = loader.content;
player.cueVideoById("FDbP71p4W4g");
player.setSize(640, 360);
player.x = 20;
player.y = 30;
seekBar.x = player.x;
seekBar.y = player.y + player.height + 10;
addChild(seekBar);
}
function onPlayerError(event:Event):void
{
// Event.data contains the event parameter, which is the error code
trace("player error:", Object(event).data);
}
function onPlayerStateChange(event:Event):void
{
// Event.data contains the event parameter, which is the new player state
trace("player state:", Object(event).data);
}
function onVideoPlaybackQualityChange(event:Event):void
{
// Event.data contains the event parameter, which is the new video quality
trace("video quality:", Object(event).data);
}
function createFeaturedButtons(player:Object, featuredVideos:Array)
{
var results:Array = [];
for each (var id:String in featuredVideos)
{
results.push(player.getClickToPlayButton(id));
}
return results;
}
function playVideo(e:MouseEvent):void
{
if (player)
{
player.playVideo();
progressTimer.start();
}
}
playBtn.addEventListener(MouseEvent.CLICK, playVideo);
function pauseVideo(e:MouseEvent):void
{
if (player)
{
player.pauseVideo();
progressTimer.stop();
}
}
pauseBtn.addEventListener(MouseEvent.CLICK, pauseVideo);
function muteVideo(e:MouseEvent):void
{
if (player)
{
player.mute();
}
}
muteBtn.addEventListener(MouseEvent.CLICK, muteVideo);
function unMuteVideo(e:MouseEvent):void
{
if (player)
{
player.unMute();
}
}
unMuteBtn.addEventListener(MouseEvent.CLICK, unMuteVideo);
Copy link to clipboard
Copied
Thank you so much, you have saved my bacon!
Copy link to clipboard
Copied
Just one more thing, is there a way to get the progress bar to automatically start when the big red play button ontop of the video itself is clicked? Thanks!
Copy link to clipboard
Copied
I am sure there is.
Player, obviously, dispatches its state change - I guess you can rely on it and start/stop timer depending on the current state.
Copy link to clipboard
Copied
Fixed it by placing the progressTimer.start(); in the onPlayerStateChange function! Do you know how to place the timer into something like a dynamic text box? I tried earlier but it doesn't display anything.
Copy link to clipboard
Copied
I don't understand "dynamic text box" thing...
Copy link to clipboard
Copied
Sorry I should explain, with a music player I created I managed to get a song title to display in a text object set to dynamic text, I'm just wondering if there is a way to display the time elapsed and total time on the stage?
Copy link to clipboard
Copied
Well, this is a separate topic and, as such, deserves a separate thread.
Copy link to clipboard
Copied
done, thanks for your help on this!
Copy link to clipboard
Copied
Quick question, in this fuction is there a way to target a png instead of "drawing" a seekHead?
function drawSeekHead():void {
seekHead = new Sprite();
seekHead.graphics.beginFill(0xff0000);
seekHead.graphics.drawCircle(0, 0, 7);
seekBar.addChild(seekHead);
seekHead.mouseEnabled = true;
seekHead.buttonMode = true;
seekHead.useHandCursor = true;
seekHead.addEventListener(MouseEvent.MOUSE_DOWN, startSeek); }
Find more inspiration, events, and resources on the new Adobe Community
Explore Now