Improving HTML5 video and jQuery code to be more efficient

My web page has 5 videos on it. Only when you hover over the video will it begin to play. My code for this is as follows:

$(".service:nth-child(1) a").hover(function(){ $('.service:nth-child(1) a video#bgvid').get(0).play(); },function(){ $('.service:nth-child(1) a video#bgvid').get(0).pause(); });

I have used :nth-child because if I hover over video 4, it plays video 1 so I have to be specific. This means I have to repeat the above code for every video but change the :nth-child number accordingly. I'm not particularly skilled with JS but there has to be a better and more efficient way of doing this?

-------------Problems Reply------------

Untested but this should get you started. Ha, a pun. this. Get it?

$('.service a').hover(function(){
$(this).children('video').get(0).play();
}, function(){
$(this).children('video').get(0).pause();
});

See also: http://stackoverflow.com/a/28443915/362536

Like brad said, using this will allow you to get the currently hovered element. However, afaik jQuery doesn't give you access to the HTML5 video API through their object, so you'd need to do something like:

$('.service a video').hover(function(e){
e.target.play();
}, function(e){
e.target.pause();
});

When you bind a function to an event, this will always be the object on which the event was triggered. Calling $(this) returns a jQuery'd object

Category:javascript Views:3 Time:2018-04-15

Related post

  • Controlling HTML5 video and short code approach 2011-04-11

    I would like to use this approach to catch the “ended” event of the <video> element: var v = document.getElementsByTagName("video")[0]; v.onended = function(e) { /* handle event */ } But it doesn’t get fired under Safari 5.0.4 (6533.20.27). If

  • scale HTML5 Video and break aspect ratio to fill whole site 2010-10-22

    I want to use a 4:3 video as a background on a site, but setting the width and height to 100% doesnt work, since the aspect ratio is kept intact, so the video doesnt fill the whole width of the site. thanks for your help! here is my html and css code

  • Playing HTML5 Video and Audio simultaneously 2010-09-05

    At this URL I have HTML5 video and audio elements both set to autoplay but it appears as though only the video is auto-playing. Clicking on the thumbnails should start up a new video as well as a new audio file but I am only seeing a response from th

  • How to Play HTML5 video and YouTube Video within Android WebView? 2011-08-08

    I am trying to play html5 video and youtube video within android webview, but can't display video on android webview screen. and play this video. I have used below code snippet... layout xml file naming: test.xml contains below code snipet: <?xml

  • Where can I start learning how to style the HTML5 Video and Audio elements? 2010-07-20

    How would I style the HTML5 Audio and Video and how do I use the API? --------------Solutions------------- http://videojs.com - makes it easy to style up the HTML5 video player using only CSS. I've worked with it in the past and it's really easy to g

  • Is there any editor which supports html and jQuery code completion? 2010-08-14

    First of all, i use eclipse to edit my html files that's not weird at all. There are plugins for eclipse which supports html and jquery code completion. But eclipse takes too much memory of my system, and i want to get rid of eclipse for html editing

  • How to create a list of links that open in an iframe in HTML5, CSS3 and jQuery? 2011-12-12

    I want to create two vertical divs using HTML5, CSS3 and JQuery. One Div contains URLs and another div contains the content. When I clicked on a link on div1 the related page should show up in div2. Example of Page 1 being active: DIV1 DIV2 **http://

  • have just finished making a video and went to watch once more time to fix any small gliches and the video won't play! 2013-04-10

    video won't play I have just finished making a video and went to watch once more time to fix any small gliches and the video won't play! help! --------------Solutions------------- Hi Tasha, 1. Are you playing the video in movie maker itself? 2. Which

  • Writing shorter code/algorithms, is more efficient (performance)? 2010-03-08

    After coming across the code golf trivia around the site it is obvious people try to find ways to write code and algorithms as short as the possibly can in terms of characters, lines and total size, even if that means writing something like: //Code b

  • pausing and playing multiple HTML5 videos using jQuery get(0) indexing? 2012-04-04

    I have a page of several videos. One can click a thumbnail to play each video. The problem is for that for greater than 2 videos, the clicking on the 3rd thumbnail doesn't pause the 2nd video so I get 2 videos playing at the same time. I'm also using

  • html5 video and firefox 2010-10-10

    So, I created a nice little html5 video player with a playlist and some jQuery transitions between the playlist view and the video view. It works great in Chrome/Safari. However, firefox is a different story. All the jQuery business works just fine;

  • Video with custom controls using HTML5 video and Javascript 2011-10-07

    I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking o

  • full page-browser html5 video without jquery 2012-04-05

    Trying to create a full browser html5 video effect, identical to this http://css-tricks.com/perfect-full-page-background-image/ but with video I read this thread Full-bleed background videos? and this Html5 Full screen video and this seems to be the

  • HTML5 Video and degradation? 2009-12-14

    I've been playing around with the HTML5 video tag and I'm puzzled as to how best to degrade when you can't support a codec? For older browsers (or IE) that don't support the video tag at all this quite is straight forward: <video width="320" heigh

  • Elearning/CBT / Animation using HTML5, CSS3 and Jquery (without using Flash) 2011-01-15

    I am trying to make a attached flash animation CBT in HTML5 using XML, Jquery and css. Can anyone help me out how to make this in HTML without using flash animation/video. Also want to use same control like (next, back, volume, play, pause, replete,

  • Html5 Video and Flash Approach 2011-04-29

    Looking into HTML5 video tag, and researching which browsers support which video file types, and my initial thought is things just got harder than just using flash. I am wondering if there is some skeleton code (combined with development approach for

  • HTML5 Video and HTML5 Boilerplate 2011-07-21

    I'm trying to implement videoJS in the HTML5 Boilerplate. I've tried pasting the embed code suggested by videoJS but the results don't work. When the page loads the "poster" image appears but the loading wheel never stops and the video never plays. I

  • Stop html5 video and swf player from playing when tab is out of focus 2011-08-31

    I am using an html5 video (html5media.com) inside a tab (jQuery UI tabs). When the video plays inside old IE browsers, it falls back to Flowplayer (swf player). My problem is whenever I select a different tab, the video continues to play when out of

  • Firefox/Gecko fullscreen API with HTML5 Video (javascript/jQuery) 2011-10-03

    I'm wondering if anyone can provide me with example javascript/jquery code of how to use Firefox's new fullscreen (NOT just full window) mode API (see link below). Basically i'd like to click something that would cause the video to go full screen. Ba

  • JQuery: Create a main video and list of two or more video thumbnails beneath it 2012-01-11

    I would like to create a video box at the top which plays a video and list of two or three video links (thumbnails) below it that when clicked they will be played on the top video box in JQuery. Thanks. P.S. I will manually create the thumbnails. Als

  • Aptana Plugin for Eclipse and jQuery code assist 2009-08-29

    I want to use autocomplete for jQuery in Eclipse. The Aptana Plugin is installed: Aptana Web Development Tools Version: 1.5.1.25495-787Y07jbcbrChz-Tq2k383275 Support for jQuery also: Aptana Support for jQuery Version: 1.3.2.00005 JavaScript/WTP is in

  • how to disable button and Jquery code for that button - asp.net mvc-3 2011-09-04

    there seems to be another problem ..not with JQuery code but with Action controller code... i am putting the breakspoints on controllers and start debugging the app, its straight away going to controller and trying to pass in the null values ...pleas

  • Html5 canvas and jquery 2012-01-10

    I have created a triangle using canvas but i was wondering if there was a way to change the fillStyle color on mouseover as if it were a div and jquery. var context = document.getElementById("canvasId").getContext("2d"); var width = 150; var height =

  • Both html5 video and flash fallback loading if browser supports both 2012-01-06

    I'm doing Html5 video play on my project with flash fallback (if it doesn't support html5). But both players are loaded if browser supports both. help me. <video controls="controls" preload="auto" poster="image.url" > <source src="video.url"

  • How can I do this jQuery code in a more reduced way? 2011-12-03

    I have the following jQuery code: $('#menu .selected').removeClass('selected'); $('#homel').addClass('selected'); $('#home').slideDown(150, function() { $('#public').slideUp(200); $('#login').slideUp(200); $('#faq').slideUp(200); }); Which, as you ca

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.244 (s). 11 q(s)