Loading ...
Sorry, an error occurred while loading the content.
 

scripted SVG playback buttons for video playback

Expand Messages
  • harry underwood
    Hi, and Happy New Year. I was just trying to construct playback button(s) for a Theora video embedded in SVG using JavaScript. However, trying to attach the
    Message 1 of 4 , Jan 2, 2008
      Hi, and Happy New Year.

      I was just trying to construct playback button(s) for a Theora video
      embedded in SVG using JavaScript. However, trying to attach the symbols
      (paths?) to the video as scripted control buttons is rather hard, as I'm
      not closely familiar with JavaScript or how to attach it to SVG and
      video appropriately.

      Does anyone have any idea as to what I'm doing wrong and how to attach
      the symbols to the JavaScript and attach the JavaScript to the video?

      Here's the file, if anyone wants to see.
      <http://raynenamibia.googlepages.com/video-reflect.svg> You have to see
      it using the experimental builds
      <http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vi\
      d/> of Opera that can handle Theora video playback.

      Thanks,
      Harry

      (PS: I drew the bar and buttons in Inkscape, so if that's also a
      problem, please let me know)



      [Non-text portions of this message have been removed]
    • Erik Dahlström
      On Wed, 02 Jan 2008 18:25:22 +0100, harry underwood ... You probably want to use video.beginElement() (see reference here[1]) which means you should set the
      Message 2 of 4 , Jan 8, 2008
        On Wed, 02 Jan 2008 18:25:22 +0100, harry underwood
        <raynenamibia@...> wrote:

        > Hi, and Happy New Year.
        >
        > I was just trying to construct playback button(s) for a Theora video
        > embedded in SVG using JavaScript. However, trying to attach the symbols
        > (paths?) to the video as scripted control buttons is rather hard, as I'm
        > not closely familiar with JavaScript or how to attach it to SVG and
        > video appropriately.

        You probably want to use video.beginElement() (see reference here[1])
        which means you should set the begin attribute on the video element to
        "indefinite".
        Then the video won't play until you start it.

        > Does anyone have any idea as to what I'm doing wrong and how to attach
        > the symbols to the JavaScript and attach the JavaScript to the video?

        Well, just open the error console (Tools > Advanced > Error console) and
        see the error messages. You have a bunch of elements which are not found
        because of incorrect id:s for example. And probably you want to fill your
        buttons or use pointer-events="all" in order to get any clicks there.

        Hope this helps
        /Erik

        [1] http://www.w3.org/TR/SVGMobile12/svgudom.html#smil__ElementTimeControl

        --
        Erik Dahlstrom, Core Technology Developer, Opera Software
        http://my.opera.com/macdev_ed
      • Harry Underwood
        Hi, thanks for the reply. Actually, I recently decided to rewrite some of the file and took advantage of one of SVG s media attributes to create both a play
        Message 3 of 4 , Jan 20, 2008
          Hi, thanks for the reply. Actually, I recently decided to rewrite some of
          the file and took advantage of one of SVG's media attributes to create both
          a play and stop button, although I wasn't able to create a pause button. You
          can see it here (press play for the video to run; pressing play after
          pressing stop will cause the video to restart):
          http://raynenamibia.googlepages.com/video-reflect2.svg

          However, now I'm trying to add a progress-meter slider (allowing the user to
          slide between portions of the video) without scripting. Since SVG is
          compatible with other XML standards (including SMIL?), I'm wondering if
          there's some XForms stuff in the current SVG spec to allow for adding a
          progress slider widget into the file.

          However, if there are no such native resources in Opera's implementation of
          SVG, then what scripting will be needed for the creation of something
          similar to Apple.com's AJAX-based progressbar?

          Thanks,
          Harry Underwood

          On Jan 8, 2008 5:39 AM, Erik Dahlström <ed@...> wrote:

          > On Wed, 02 Jan 2008 18:25:22 +0100, harry underwood
          > <raynenamibia@...> wrote:
          >
          > > Hi, and Happy New Year.
          > >
          > > I was just trying to construct playback button(s) for a Theora video
          > > embedded in SVG using JavaScript. However, trying to attach the symbols
          > > (paths?) to the video as scripted control buttons is rather hard, as I'm
          > > not closely familiar with JavaScript or how to attach it to SVG and
          > > video appropriately.
          >
          > You probably want to use video.beginElement() (see reference here[1])
          > which means you should set the begin attribute on the video element to
          > "indefinite".
          > Then the video won't play until you start it.
          >
          > > Does anyone have any idea as to what I'm doing wrong and how to attach
          > > the symbols to the JavaScript and attach the JavaScript to the video?
          >
          > Well, just open the error console (Tools > Advanced > Error console) and
          > see the error messages. You have a bunch of elements which are not found
          > because of incorrect id:s for example. And probably you want to fill your
          > buttons or use pointer-events="all" in order to get any clicks there.
          >
          > Hope this helps
          > /Erik
          >
          > [1] http://www.w3.org/TR/SVGMobile12/svgudom.html#smil__ElementTimeControl
          >
          > --
          > Erik Dahlstrom, Core Technology Developer, Opera Software
          > http://my.opera.com/macdev_ed
          >
          >
          > -----
          > To unsubscribe send a message to:
          > svg-developers-unsubscribe@yahoogroups.com
          > -or-
          > visit http://groups.yahoo.com/group/svg-developers and click "edit my
          > membership"
          > ----
          > Yahoo! Groups Links
          >
          >
          >
          >


          [Non-text portions of this message have been removed]
        • Erik Dahlström
          On Mon, 21 Jan 2008 01:08:16 +0100, Harry Underwood ... Cool demo, for those of you that don t like to view source, the solution is: begin= playbutton.click
          Message 4 of 4 , Jan 21, 2008
            On Mon, 21 Jan 2008 01:08:16 +0100, Harry Underwood
            <raynenamibia@...> wrote:

            > Hi, thanks for the reply. Actually, I recently decided to rewrite some of
            > the file and took advantage of one of SVG's media attributes to create
            > both
            > a play and stop button, although I wasn't able to create a pause button.
            > You
            > can see it here (press play for the video to run; pressing play after
            > pressing stop will cause the video to restart):
            > http://raynenamibia.googlepages.com/video-reflect2.svg

            Cool demo, for those of you that don't like to view source, the solution
            is: begin="playbutton.click" end="stopbutton.click".

            Yes, I think that the video restarts from the beginning if you click stop
            and then start is what should happen since the video ends. If you want you
            can compare it to another svg animation that you do the same thing with
            begin/end on. There is a DOM method in SVGT12 for pausing a particular
            element though (see [1]), but that wasn't supported in the video-build of
            Opera unfortunately.

            > However, now I'm trying to add a progress-meter slider (allowing the
            > user to
            > slide between portions of the video) without scripting.

            You can add a declarative animation that is synchronized with the video.

            > Since SVG is
            > compatible with other XML standards (including SMIL?), I'm wondering if
            > there's some XForms stuff in the current SVG spec to allow for adding a
            > progress slider widget into the file.

            Since SVG is XML I guess there's nothing preventing you from doing that.
            The xforms spec has at least one or two svg examples IIRC. However Opera
            does not support XForms currently.

            > However, if there are no such native resources in Opera's implementation
            > of SVG, then what scripting will be needed for the creation of something
            > similar to Apple.com's AJAX-based progressbar?

            Which progressbar? Pointer please? :)

            I think that SVGT12 has the necessary DOM methods for doing start, stop
            and pause. Additionally there are progress events that allow you to check
            loading progress. Furthermore there are the events for streaming video,
            handled by the Media Access Events spec[2], which is still in Working
            Draft status which means it may still change a bit. MAE and progressevents
            are not supported in the video-build though.

            Cheers
            /Erik

            [1] http://www.w3.org/TR/SVGMobile12/svgudom.html#svg__SVGTimedElement
            [2] http://www.w3.org/TR/MediaAccessEvents/

            --
            Erik Dahlstrom, Core Technology Developer, Opera Software
            http://my.opera.com/macdev_ed
          Your message has been successfully submitted and would be delivered to recipients shortly.