Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Play video of sparks onclick of text

    I'm just starting out with JavaScript and I've hit a snag. I have a transparent sparks animation in .ogv and I want it to play when I click on text (which also has a neon glowing effect). I can overlap the video under the text but I want a more seamless effect. I haven't been able to find a solution and I'd really appreciate any help here. Here's what I have so far:


    [CODE]
    <div id="splash">
    <div id="sparks">
    <video id="neonsparks" width="200" height="300">
    <source src="sfx/sparks.ogv" type="video/ogg"></source>
    </video>
    </div>
    <audio id="neon-on" preload="auto">
    <source src="sounds/splash.mp3"></source>
    <source src="sounds/splash.ogg"></source>
    </audio>
    <a href="#">Media Design</a>

    <script src="scripts/sparks.js"></script>
    <script src="scripts/neon.js"></script>

    </div>
    </div>
    [CODE]



    JAVASCRIPT FOR SPARKS.JS:

    [CODE]
    document.addEventListener('mouseover',hoverVideo,false);
    var vid = document.getElementById('neonsparks');
    function hoverVideo(e)
    {
    if(e.target == vid)
    {
    vid.play();
    this.addEventListener('mouseout',hideVideo,false);
    }

    }
    [CODE]

  • #2
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glad you could use it. I did arrive at a solution earlier which turned out to be pretty simple. I added this to my HTML:

    Code:
    <a onmouseover="hoverVideo()">Media Design</a>

    and this to my JavaScript for sparks.js:


    Code:
    function hoverVideo()
    {  
    var vid = document.getElementById('neonsparks');
    vid.play();
    this.addEventListener('mouseout',hideVideo,false);
    }

    That solved the problem and I think converting my video to an animated GIF should fix any cross-browser compatibility issues. There's just the problem of hiding the black box that surrounds the image. Chrome has it overlapping my other text. Can z-index help here? If anyone has a better way of doing this I'd love to hear it.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there any alternative coding for it?

    Usedcars

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If there is I'd love to hear about it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •