Question

我试图创建一个带有视频播放的功能，同时鼠标悬停突出显示的单词，并在鼠标离开时暂停。
但目前我只知道如何在鼠标悬停视频时自动播放而不是突出显示的单词。希望有人能帮助我感谢

＆＃13;

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

＆＃13;

Answer 1

没有jQuery就可以实现这一目标的一种方法（因为你似乎没有在你的代码片段中使用它）是为视频分配id然后添加onmouseover和{{ 1}}事件到onmouseout标记，该标记以a为目标。

将id添加到id="video"代码
将video和onmouseover="document.getElementById('video').play()"添加到包含＆＃34; Play＆amp; Pause＆＃34;的onmouseout="document.getElementById('video').pause()"标记中。文本

＆＃13;

要整理代码，您可以集中此功能并删除内联JavaScript。

将<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>添加到将触发播放和暂停事件的元素
在JavaScript中循环使用class="trigger"类的元素并附加trigger和mouseover个事件

＆＃13;

mouseout

＆＃13;

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);
}

＆＃13;

Answer 2

在这里！ https://jsfiddle.net/Alteyss/vsvzh3m2/

使用简单的jQuery，模拟鼠标。

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

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

希望我帮助过。

Answer 3

单独使用jQuery，并定位元素而不是使用内联脚本：

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

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

示例：jsfiddle

希望它有所帮助。

Answer 4

很简单。在突出显示的文本周围添加<span id="text"></span>

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

在悬停到突出显示的单词时播放视频

4 个答案: