个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想通过像this website(Apple Macbook)这样滚动来显示视频的特定帧。设置 currentTime 属性似乎在 Firefox 和 Safari 中有效，但在 Chrome 中不起作用。我认为 Chrome 添加事件监听器的事件类型“loadedmetadata”是错误的。代码如下。
HTML 和 JS
(function(document) {
var video;
$(function() {
init();
});
function init() {
video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', function() {
setClick();
setScroll();
});
}
function setClick() {
$('#myButton').on('click', function() {
video.currentTime = 2;
});
}
function setScroll() {
$(window).on('scroll', setFrame);
}
function setFrame() {
var pos = $(window).scrollTop();
console.log(pos);
video.currentTime = pos/5;
}
})(document);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>funny thing</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<button id="myButton">i am button</button>
<video id="myVideo" controls height="800" preload="metadata">
<source src="test.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
</video>
</body>
</html>最佳答案
如果您只给它一个有效的网址，那么我在 Chrome 上工作得很好，您的代码段将无法工作，因为 test.mp4 不存在。这是jsfiddle和一个片段:
(function(document) {
var video;
$(function() {
init();
});
function init() {
video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', function() {
setClick();
setScroll();
});
}
function setClick() {
$('#myButton').on('click', function() {
video.currentTime = 2;
});
}
function setScroll() {
$(window).on('scroll', setFrame);
}
function setFrame() {
var pos = $(window).scrollTop();
console.log(pos);
video.currentTime = pos/5;
}
})(document);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>funny thing</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<button id="myButton">i am button</button>
<video id="myVideo" controls height="200" preload="metadata">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
</video>
</body>
</html>关于javascript - currentTime 属性在 Chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30430695/
25
4
0
在这段代码中，我有 video.currentTime = {value}而且效果很好。 但是当我尝试按 Crtl+Shift+R 重新加载页面时，它会将 video.currentTime 设置为
我希望能够将视频重新加载到 HTML5 视频中，而无需在加载时重置 currentTime。我目前的做法如下: Get current time position Set time position
如何获取YouTube视频的当前时间？ 我一直在搜索YouTube api，但我不明白: https://developers.google.com/youtube/js_api_reference?
我正在尝试编写一段 Javascript 以定时间隔在两个视频之间切换(不要问)。更糟糕的是，每个视频都必须从特定位置开始(大约十秒，再说一遍，不要问。) 我通过使用 YUI Async 库触发以间隔
我在我的应用程序中播放的音频有问题。我有 HTML 音频: 然后在我的游戏中我有这样的代码 jQuery('#correct-sound').get(0)
我希望我的audio2 文件在audio1.currentTime 为3 秒时播放，但我无法使其工作。我是 javascript 的新手，我错过了什么？这是我当前的 JavaScript 代码:
使用 Web Audio API 使用振荡器生成基本音调，但存在改变演奏音符的持续时间(以秒为单位)的问题。 问题在于“维持”变量未按预期工作以停止振荡器。该变量按预期播放一个音符，然后其余音符无限持
这是我的代码: public void idoKiiras(){ String idostring = new String(); idostring.valueOf(System.
我目前正在尝试编写学校时间表。我总是在开学第一天检查我们在学校拿到的纸质格式。这就是我的问题: 我想在一天中的某个时刻显示一个标签(有关类(class)的信息)。我的意思是，如果时钟是 10:20，它
我想我在 JavaScript Audio API 上发现了一个错误。 我的代码运行得非常完美: var audio=new Audio(); var lastPause; var myPlayer=
在我问我的问题之前，我只是想说我对 Javascript 和 StackOverflow 一般都是菜鸟，所以如果这个问题太愚蠢，我想提前道歉。 无论如何，我正在学习 Javascript，现在我正在试
所以，我有一些代码由于某些奇怪的原因而不起作用。它的任务是，更改 id 为 blogtxt 的元素的属性 class IF day 变量等于 4、5 或 6(周五、周六、周日)我还希望在 day =
我在音频 html5 中使用 currentTime 时遇到问题。它在控制台中给我一个错误 InvalidStateError: An attempt was made to use an objec
当我更改其中一个 AVAudioPlayer 的 rate 并稍后调用 currentTime 时，我得到了错误的值。这是为什么？ 例如，这段代码没有像我期望的那样工作: AVAudioPlayer*
当我在暂停播放器后更改 AVAudioPlayer 的 currentTime 时，它会出现滞后(一些时间为正，一些时间为负)。 [self.bookAudioPlayer pause]; [self
我有两个服务，服务 A 和服务 B。 我在服务 B 上调用方法 doStuff() 并在数据库中创建一个条目，其中包含 system.CurrentTime()当时运行 B 代码的计算机。 我在服务
我有一个简单的 HTML 页面，我在该页面上播放视频。我使用滚动条作为搜索栏。换句话说，只要用户滚动，视频就会播放。 我已经在几个地方看到过这种效果，并且想自己创建它。我写的脚本可以正常运行，但有一个
我有如下设置，在装有 iOS 10.3 的 iPhone 5s 上进行测试，包括调试和未调试。 AVAudioRecorder 触发 record(forDuration: 5.0) CADispla
这是一个 link to the sandbox .我正在寻找操纵 的最佳方法元素的当前时间。在我的沙箱中，我已经能够通过让按钮调用函数来做到这一点 seek()这改变了 video 的状态, 对
我正在尝试从声音文件中的某个点开始播放声音 (mp3)。我希望它可以在大多数移动设备上运行，并且确实可以，但 Windows Phone 8 似乎存在问题。它在三星 Galaxy 和 iPhone 上
我是一名优秀的程序员,十分优秀！