CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jake Cube
Jake Cube

Reputation: 143

Play video while hover to highlighted words

Im trying to create a function with video play while mouseover the highlighted words and pause when mouse leave.
But currently i only know how to auto play while mouseover the video not the highlighted words. Wish any could help me on this.
Thanks

<a href="https://www.google.com" target="_blank"><video width="250px" height="250px"  controls preload onmouseover="this.play()" onmouseout="this.pause()" >
				<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" >
				Not Supporting
			</video></a>
<br/><br/>
<a href="#" >Play&Pause</a>

Upvotes: 2

Views: 1176

Answers (4)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

One way you can achieve this without jQuery (as you don't appear to be using it in your snippet) is to assign an id to the video then add onmouseover and onmouseout events to the a tag which targets the element with that id.

  • Add id="video" to the video tag
  • Add onmouseover="document.getElementById('video').play()" and onmouseout="document.getElementById('video').pause()" to the a tag containing the "Play&Pause" text

<a href="https://www.google.com" target="_blank">
  <video width="250px" height="250px" controls preload onmouseover="this.play()" onmouseout="this.pause()" id="video">
    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      Not Supporting
  </video>
</a>
<br/>
<br/>
<a href="#" onmouseover="document.getElementById('video').play()" onmouseout="document.getElementById('video').pause()">Play&Pause</a>

To tidy up your code you can centralise this functionality and remove the inline JavaScript.

  • Add class="trigger" to elements that will trigger the play and pause events
  • In JavaScript loop through the elements with the trigger class and attach the mouseover and mouseout events

var triggers = document.getElementsByClassName('trigger');
var video = document.getElementById("video");

for (var i = 0; i < triggers.length; i++) {
  triggers[i].addEventListener("mouseover", function(event) {
    video.play()
  }, false);
  triggers[i].addEventListener("mouseout", function(event) {
    video.pause()
  }, false);
}
<a href="https://www.google.com" target="_blank">
  <video class="trigger" width="250px" height="250px" controls preload id="video">
    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      Not Supporting
  </video>
</a>
<br/>
<br/>
<a class="trigger" href="#">Play&Pause</a>

Upvotes: 1

Alteyss
Alteyss

Reputation: 513

Here it is ! https://jsfiddle.net/Alteyss/vsvzh3m2/

Using simple jQuery, simulating the mouse.

$("#btn").mouseover(function() {
    $("video").mouseover();
});

$("#btn").mouseout(function() {
    $("video").mouseout();
});

Hope I helped.

Upvotes: 0

Sebastian Witeczek
Sebastian Witeczek

Reputation: 133

Very simple. Add a <span id="text"></span> around your highlighted Text

$( '#text' ).hover(
 function() {
  $( 'video' ).play();
 }, function() {
  $( 'video' ).pause();
 }
);

Upvotes: 0

prettyInPink
prettyInPink

Reputation: 3444

By using jQuery alone, and targeting the elements rather than using inline scripting:

var $myVideo = $( "#myVideo" ),
    $myBtn   = $( "#play_btn" );

$myBtn.hover(function() {
    $myVideo[0].play();
    }, function() {
    $myVideo[0].pause();
});

Example: jsfiddle

Hope it helps.

Upvotes: 0

Related Questions