Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Seekbar Actionscript 3

New Here ,
Aug 14, 2013 Aug 14, 2013

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
Creates and returns a thumbnail that functions as a click-to-play button for a video. The button is an extension of the player that issued it, and when the button is clicked, the player will play the associated video. This function, which is only supported in the Flash (AS3) Player API, provides the best way to trigger a video playback when a user clicks on a video thumbnail.

  • The required videoId parameter identifies the video associated with the new button. The button is skinned with the video's hqdefaultthumbnail 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.
  • The optional 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.
  • The optional 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();

          }

}

TOPICS
ActionScript
6.0K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 14, 2013 Aug 14, 2013

are you publishing for as3 or as2?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 14, 2013 Aug 14, 2013

actionscript 3

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 14, 2013 Aug 14, 2013

then Void needs to be void.

and

function player.seekTo

makes no sense.  remove that code and retest.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 14, 2013 Aug 14, 2013

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!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 14, 2013 Aug 14, 2013

copy and paste your corrected code.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 14, 2013 Aug 14, 2013

player.seekBar = seekTo;

function (seconds:Number, allowSeekAhead:False):void

{

          if (player)

          {

                    player.seekTo();

          }

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 14, 2013 Aug 14, 2013

delete all of the following from your original code:

function player.seekTo(seconds:Number, allowSeekAhead:False):Void

{

          if (player)

          {

                    player.seekTo();

          }

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 14, 2013 Aug 14, 2013

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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 14, 2013 Aug 14, 2013

do you have an flvplayback component on stage named player?

do you have a custom seekbar named seekTo on stage?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 14, 2013 Aug 14, 2013

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 14, 2013 Aug 14, 2013

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);

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 15, 2013 Aug 15, 2013

Thank you so much, you have saved my bacon!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 15, 2013 Aug 15, 2013

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!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 15, 2013 Aug 15, 2013

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 15, 2013 Aug 15, 2013

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 15, 2013 Aug 15, 2013

I don't understand "dynamic text box" thing...

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 15, 2013 Aug 15, 2013

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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 15, 2013 Aug 15, 2013

Well, this is a separate topic and, as such, deserves a separate thread.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 15, 2013 Aug 15, 2013

done, thanks for your help on this!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 09, 2014 Jan 09, 2014
LATEST

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); }

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines