html视频鼠标移除不播放,使用HTML5和Javascript重置鼠标时的视频(Reset a video on mouse out using HTML5 and Javascript)...

使用HTML5和Javascript重置鼠标时的视频(Reset a video on mouse out using HTML5 and Javascript)

我试图让悬停后出现的视频重置为开始，一旦鼠标离开，这里是我测试的链接 。 我在寻找答案时发现了这一点但我无法弄清楚如何完成这项工作。

这里是我获得javascript代码的地方： 代码链接

任何帮助或建议都会很棒。 谢谢！ :)

I am trying to get the video that appears after the hover to reset to the start once the mouse leaves, here is the link to my test. I found this in my search for an answer But I can not figure it out how to make that work.

Here is where I got the code for the javascript: Link to code

Any help or advice would be great. Thank you! :)

原文：https://stackoverflow.com/questions/10457750

更新时间：2021-02-13 20:02

最满意答案

由于您的网站使用jQuery：

$(".h5vt").mouseout(function() {

$("video").get(0).currentTime = 0;

})

只需将一个mouseout事件绑定到回放视频的图像即可。

您应该为视频添加一个id属性，并使用$("#myvideoid").get(0)或document.getElementById("myvideoid")而不是$("video").get(0)例。 我的选择器代码只是一个解决方法，因为您的视频元素缺少id 。

Since your site uses jQuery:

$(".h5vt").mouseout(function() {

$("video").get(0).currentTime = 0;

})

Just bind a mouseout event to the image that rewinds the video.

You should add an id attribute to video and access it with $("#myvideoid").get(0) or document.getElementById("myvideoid") instead of with $("video").get(0) as in my example. My selector code is just a workaround due to the fact that your video element lacks an id.

相关问答

我假设准备好播放意味着readyState属性等于HAVE_ENOUGH_DATA常量(数值为4)。 根据文档 ，当readyState属性变为此值时，应该触发canplay事件。 I assume that ready for playback means that the readyState property is equal to HAVE_ENOUGH_DATA constant (numeric value 4). According to the doc, when the read

...

由于您的网站使用jQuery： $(".h5vt").mouseout(function() {

$("video").get(0).currentTime = 0;

})

只需将一个mouseout事件绑定到回放视频的图像即可。 您应该为视频添加一个id属性，并使用$("#myvideoid").get(0)或document.getElementById("myvideoid")而不是$("video").get(0)例。 我的选择器代码只是一个解决方法，因为您的视频元素缺少id 。

...

这里 DEMO var vids = {

vid1:"http://www.youtube.com/embed/87O_YA4rLyk",

vid2:"http://www.youtube.com/embed/nQ2TsPhsWTA"

}

$(function(e) {

$(".video-section ul li").click(function(e) {

$(this).hide();

$(this).siblings().show();

...

你有没有尝试过：

document.getElementById('foo').focus();

焦点方法为键盘提供键盘焦点。 I found a way to fake focus for a video element by utilizing a global variable. ex: $(function(){

var focused_vid;

$('

...

通过Mic查看链接后，我需要一行额外的代码 a=document.getElementById('video1')

a.load()

After looking at the link by Mic I needed an extra line of code a=document.getElementById('video1')

a.load()

这样做的方法是抓取video元素的每个帧并进行处理，然后用canvas取代它。 这是我最近为我的书做的一个例子 (警告：我知道目前IE9中的这个例子存在一些问题)，它使用了HTML5 Rocks的灰度过滤器。 主循环看起来像这样，假设video是元素的引用， context是2d画布上下文， requestAnimFrame来自Paul Irish ： function draw() {

if(video.paused || video.ended) return false;

c

...

你可能会让这个看起来更优雅，但下面的代码示例将允许你有一些按钮来改变HD和常规版本之间的来源(根据按钮的ID，但你可以根据需要改变逻辑)。 代码还会检查浏览器是否支持mp4，ogg或webm，并默认使用第一种支持的格式(因此，如果您使用代码的那部分，则可能需要对每种类型进行编码

Your b

...

VideoJS是纯粹基于CSS的视频播放器，它是开源的。如果我要用HTML5解决这个问题，这是我唯一的选择。 对于视频控件，VideoJS在开始时有一些选项。 $("video").VideoJS({

controlsbelow: false,

showControlAtStart: false

});

对于全屏问题，我找到了自己的解决方案，我希望与您分享。 由于我知道屏幕尺寸，因此我在所有内容上面制作了一个面板。 .fullscreen {

width:128

...

是的，试试这个。 你必须使用currentTime属性。 从那开始，从那里开始你的JavaScript功能。 那是你在找什么？ var vid = document.getElementById("video");

//Add a timeupdate listener

video.addEventListener("timeupdate", function(){

//Check for video properties from within the function

if

...

即使我等到loadmetadata事件到达，但结果是缺乏对web.py的HTTP字节范围请求的支持，这阻止了搜索。 HTTP字节范围请求需要在HTML5视频中进行搜索，而事实证明web.py不支持它们，因此我使用Apache提供视频，并且它运行完美无瑕。 谢谢您的反馈！ Even though I was waiting until the loadedmetadata event was reached, it turned out to be the lack of support for H

...