Enjoy watching a video by simply hovering over the highlighted words

Question

Enjoy watching a video by simply hovering over the highlighted words

I am looking to implement a function where the video plays when hovering over highlighted words and pauses when the mouse moves away. However, I am currently only able to get the video to autoplay upon hover, not the highlighted words. Any assistance on this would be greatly appreciated.

<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>

javascript jquery html css

Answer 1

Answer №1

If you prefer not to use jQuery (which is not in your snippet), here's a method to achieve the same result: simply give the video an id, then add onmouseover and onmouseout events to the a tag that targets the element with that id.

Assign 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 organize your code better, you can centralize this functionality and eliminate inline JavaScript.

Give elements that will trigger play and pause events a class="trigger"
In JavaScript, iterate 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>

Answer 2

If you prefer not to use jQuery (which is not in your snippet), here's a method to achieve the same result: simply give the video an id, then add onmouseover and onmouseout events to the a tag that targets the element with that id.

Assign 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 organize your code better, you can centralize this functionality and eliminate inline JavaScript.

Give elements that will trigger play and pause events a class="trigger"
In JavaScript, iterate 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>

Answer 3

Answer №2

When utilizing jQuery exclusively and focusing on elements rather than using inline scripting, you can achieve the following:

var $videoElement = $( "#myVideo" ),
    $playButton   = $( "#play_btn" );

$playButton.hover(function() {
    $videoElement[0].play();
    }, function() {
    $videoElement[0].pause();
});

Check out this example: jsfiddle

I hope this explanation is beneficial to you.

Answer 4

When utilizing jQuery exclusively and focusing on elements rather than using inline scripting, you can achieve the following:

var $videoElement = $( "#myVideo" ),
    $playButton   = $( "#play_btn" );

$playButton.hover(function() {
    $videoElement[0].play();
    }, function() {
    $videoElement[0].pause();
});

Check out this example: jsfiddle

I hope this explanation is beneficial to you.

Answer 5

Answer №3

It's quite easy. Just wrap your highlighted Text with a

<span id="text"></span>

$( '#text' ).on('mouseover', function() {
  $( 'video' ).play();
}).on('mouseout', function() {
  $( 'video' ).pause();
});

Answer 6

It's quite easy. Just wrap your highlighted Text with a

<span id="text"></span>

$( '#text' ).on('mouseover', function() {
  $( 'video' ).play();
}).on('mouseout', function() {
  $( 'video' ).pause();
});

Answer 7

Answer №4

Check it out here! https://jsfiddle.net/NewUser/abc123/

This example utilizes basic jQuery to simulate mouse actions.

$("#trigger").hover(function() {
    $("image").mouseover();
});

$("#trigger").mouseleave(function() {
    $("image").mouseout();
});

I hope this information is helpful!

Answer 8

Check it out here! https://jsfiddle.net/NewUser/abc123/

This example utilizes basic jQuery to simulate mouse actions.

$("#trigger").hover(function() {
    $("image").mouseover();
});

$("#trigger").mouseleave(function() {
    $("image").mouseout();
});

I hope this information is helpful!

Enjoy watching a video by simply hovering over the highlighted words

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When the page is resized, the Font-Awesome icons shift position

Managing additional data in jQuery autocomplete

Using an image link in CodeIgniter will not function properly

Steps for inserting new rows into a table from text fields1. Begin

Using Laravel 4 in combination with AJAX serialization, submitting a form with a check box

validating price ranges with the use of javascript or jquery

Automatically choose the initial <select> option when loading asynchronous choices in Vue 3

Showing a button link on a mobile device when images are disabled

Effectively handle multiple connections from nodejs to postgres using the pg library

Chrome is experiencing compatibility issues with Datatable

Display 3 buttons only on screens smaller than 576 pixels, and hide them on wider screens

Innovative User Handle Generation using Firebase in a React/Javascript Environment

Troubleshooting Angular Toaster issues with TypeScript

Accelerating the process of compiling subwords using the letters found in different words

Remove the initial section of the text and provide the rest of the string

Locate the index of the item I am selecting within the Owl Carousel

Droppable TextArea in JQuery now has fixed sections

Leveraging Async/Await to track error counts across three distinct loops, each invoking an asynchronous function in every iteration

Encountering a problem during the transition from webpack 1.x to webpack 2.x, specifically related to the absence of an

Panel floating with Bootstrap framework