SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Video Play over mouse hover

    Hi all,

    Need help, I am trying to make a video play when i hover over it on my site.

    The html is below and the video tag is called windows

    HTML Code:
    <!DOCTYPE HTML>
    		<html xmlns="http://www.w3.org/1999/xhtml">
    
    
    		<head>
    		<script src="code.js" type="text/javascript"></script>
    		<meta charset="UTF-8">
    		<link href="general.css" rel="stylesheet" type="text/css">
    		<title>TEMP NAME</title>
    		
    		<div class="header_main">
    		
    		Logo and heading(Picture) animated
    		</div>
    		</head>
    		
    		<body id="wrap">
    		
    		<div class="left_bar">
    		<img src="left_bar.png" alt="Left Bar"></img>
    		</div>
    		<div class="middle_bar">
    		<img src="middle_bar.png" alt="Middle Bar"></img>
    		</div>
    		<div class="right_bar">
    		<img src="right_bar.png" alt="Right Bar"></img>
    		</div>
    		<div class="left_panel">
    		
    		</div>
    		<div class="right_panel">
    		
    		</div>
    		<div class="whole">
    		
    		<div class="window">
    		
    		<div class="windows">
    		<embed src="test.mov" width="130" height="400" controller="false" onfocus="hoverVideo()" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" id="windowOne">
    		</div>
    		<div class="windows">
    		<embed src="test1.mov" width="130" height="400" controller="false" autostart="false" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" >
    		</div>
    		<div class="windows">
    		<embed src="test2.mov" width="130" height="400" controller="false" autostart="false" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" >
    		</div>
    		<div class="windows">
    		<embed src="test3.mov" width="130" height="400" controller="false" autostart="false" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" >
    		</div>
    		<div class="windows">
    		<embed src="test4.mov" width="130" height="400" controller="false" autostart="false" loop="true" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" >
    		</div>
    		</div>
    		
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		
    		
    		
    		
    		</div>
    		
    		</body>
    		
    		
    		</html>
    The code that i have so far which i am struggling with.

    Code:
    document.addEventListener('mouseover',hoverVideo(),false);
    var vid = document.getElementByTagId('windows');
    function hoverVideo(e)
    { 
    	alert("working");
     if(e.windowOne == vid)
     {
      vid.play();
      this.addEventListener('mouseout',hideVideo,false);
     }
    
    }
    
    function hideVideo(e)
    {
     if(e.target == vid)
     {
      vid.pause();
     }
    
    }
    The alert is to test that it goes to the function on the hover. But that alert appears upon opening the web page.


    Any ideas???

  2. #2
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Are you running the script before the DOM has finished loading? e.g. binding the events before the actual DOM-elements have been created. If so, then try placing your JS code inside a Window.onload or document.ready clause

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey man thanks but I'm not quite sure how to do that. I Google dunno it but from my understanding that will run the function once everything is loaded. I only want to run the script upon mouse hover. Am I correct??

    Sent from my GT-I9500 using Tapatalk 2

  4. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this

    Code:
    var vid = document.getElementsByClassName("windows");
    [].forEach.call(vid, function (item) {
        item.addEventListener('mouseover', hoverVideo, false);
        item.addEventListener('mouseout', hideVideo, false);
    });
    
    function hoverVideo(e)
    {   
        this.play();
    }
    function hideVideo(e)
    {
        this.pause();
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AWESOME MAN THANKS.....it works but it doesnt play the video, gonna have to work on that.

    Mayu i ask that you explain your code to me???
    This is my try at understanding it.

    var vid = document.getElementsByClassName("windows"); //places windows element as vid
    [].forEach.call(vid, function (item) { //calls each item as an array element and then returns its function
    item.addEventListener('mouseover', hoverVideo, false);
    item.addEventListener('mouseout', hideVideo, false);
    });

    function hoverVideo(e)
    {
    this.play();
    }
    function hideVideo(e)
    {
    this.pause();
    }


    Am i correct????

  6. #6
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes vid is the collection of "windows" and the foreach just loops through and sets the eventlistener. If your going down the html5 route then you may want to change to using video tags.. this is always a useful site for me http://www.w3schools.com/html/html5_video.asp

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FreshPete View Post
    yes vid is the collection of "windows" and the foreach just loops through and sets the eventlistener. If your going down the html5 route then you may want to change to using video tags.. this is always a useful site for me http://www.w3schools.com/html/html5_video.asp
    I should be able to use attributes in the css code right.

    eg.

    video{

    float: left
    etc etc


    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sigh videos not playing the alerts work so obviously the class Is accessed. Been googling but cannot find anything

    Sent from my GT-I9500 using Tapatalk 2

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    isn't .mov a quicktime format so you would have to reference some quicktime things to get it playing http://developer.apple.com/library/s...1526-CH001-SW5

    maybe some other video formats would be easier to work with

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried all of them hey but will check. Mov again with that link... Thanks man

    Sent from my GT-I9500 using Tapatalk 2

  11. #11
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alternatively just add onMouseOver="this.play()" onMouseOut="this.pause()" to your embed tags and remove the javascript eventlistener

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the video.. I put an alert in the hovervideo method and it displays on mouse over and I put one in hidevideo which also displays when the mouse goes off the frame again. It's the video or the tag or the this.play()

    Sent from my GT-I9500 using Tapatalk 2

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the other tag i tried <video class="vid1" width="130" height="400" loop>
    <source src="test1.3gp" type='video/3gp'>
    <source src="test1.mov" type='video/mov'>
    <source src="test1.mp4" type='video/mp4'>
    <source src="test1.ogg" type='video/ogg'>
    <source src="test1.webm" type='video/webm'>
    <object data="test1.mp4" width="320" height="240">
    <embed src="test1.mp4" width="320" height="240">
    </object>
    </video>


    stilol nothing

  14. #14
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <video class="vid1" width="130" height="400" loop onMouseOver="this.play()" onMouseOut="this.pause()">
    <source src="test1.3gp" type='video/3gp'>
    <source src="test1.mov" type='video/mov'>
    <source src="test1.mp4" type='video/mp4'>
    <source src="test1.ogg" type='video/ogg'>
    <source src="test1.webm" type='video/webm'>
    <object data="test1.mp4" width="320" height="240">
    <embed src="test1.mp4" width="320" height="240">
    </object>
    </video>

    what about when adding the mouseover and mouseout events to the video tag ..

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    seems like it loads the video but doesnt play it. Cause the frame dissapears for a few seconds on page load. sigh....

  16. #16
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a working example now I can email it over to you?

  17. #17
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would appreciate that a lot... <snip />

    Sent from my GT-I9500 using Tapatalk 2


    Edit:

    Removed for OP privacy - please use email link in profile or PM to get email address
    Last edited by DaveMaxwell; Jun 14, 2013 at 10:06. Reason: email address removed


Bookmarks

Posting Permissions

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