我正在尝试通过JS更改视频源.这主要是有效的.
var basename = "video/whatever";
$("#myvideo")[0].setSrc([
{type: "video/mp4", src: basename + ".mp4"},
{type: "video/webm", src: basename + ".webm"},
{type: "video/ogg", src: basename + ".ogv"}
]);
Run Code Online (Sandbox Code Playgroud)
所以第一个问题:当我更改源时,暂停按钮显示而不是播放,并且即使暂停,也不会显示大的叠加播放按钮.我已经尝试在setSrc调用之前和之后发送stop()和pause()以及setCurrentTime(0)的各种组合,但没有运气.
更重要的问题:我还没有找到改变视频海报形象的方法.我期待在API中看到一个方法来更改它,因为我希望它也可以更新Flash/Silverlight后备.我尝试只更改视频元素上的poster属性,但似乎没有这样做.
我的HTML中有一个" ng-init "指令,它在我的Angular.js数据模型中初始化" data.id " 的值.我们现在说,我无法改变其运作方式.
现在,我希望在页面加载后立即发出HTTP请求,其中URL将取决于此data.id值.到目前为止,以下似乎有效:
app.controller('MainCtrl', function ($scope, $http, $timeout) {
"use strict";
$scope.data = {};
$timeout(function () {
$http.get("/api/Something?id=" + $scope.data.id);
}, 0);
});
Run Code Online (Sandbox Code Playgroud)
但是,使用超时为零的计时器似乎很笨拙.(如果我省略$ timeout代码并直接调用$ http.get,那么$ scope.data.id当然是未定义的).
在发出$ http请求之前,有没有更好的方法等待ng-init执行?以上基于超时的代码是否适用于所有情况/所有浏览器等?
我有以下代码,它演示了直接从事件触发器调用长时间运行的函数与使用的区别setTimeout().
预期行为:
当按下第一个按钮时,它会显示为按下,计算运行几秒钟,然后当计算完成时,按钮再次按下,第二列从"尚未计算"变为"计算完成".(我不会详细说明为什么会发生这种情况; 它在相关答案中进行了解释.)
按下第二个按钮时,按钮立即按下; 第二列立即更改为"正在计算..."文本.当计算在几秒钟后完成时,第二列从"计算..."变为"完成计算".
实际发生了什么:
这在Chrome中完美运行(两个按钮都按预期运行)
这在Internet Explorer 8中完美运行
这在Firefox(第25版)中不起作用.具体来说,第二个按钮作为第一个按钮表现为100%.
在更改超时setTimeout()从0到1无影响
在更改超时setTimeout()从0以500 作品
这让我有一个很大的难题.
根据为什么setTimeout()有效的原因,而缺少一个没有的原因,延迟对事物的运作方式应该没有影响,因为这里setTimeout()的主要目的是改变排队顺序,而不是拖延事情.
那么,为什么它不能在Firefox上使用延迟0或1,但按预期工作延迟500(并且适用于Internet Explorer 8/Chrome上的任何延迟)?
更新:除了下面的源代码,我还做了一个JSFiddle.但由于某些原因,JSFiddle甚至拒绝加载我的Internet Explorer 8,因此对于该测试,需要以下代码.
更新2:有人提出了dom.min_timeout_valueFirefox中配置设置问题的可能性.我已将其编辑为4到0,重新启动浏览器,并且没有修复任何内容.它仍然失败,超时为0或1,成功为500.
这是我的源代码 - 我只是将其保存到C:驱动器上的HTML文件中,并在所有三个浏览器中打开:
<html><body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<table border=1>
<tr><td><button id='do'>Do long calc - bad status!</button></td>
<td><div id='status'>Not Calculating yet.</div></td></tr>
<tr><td><button id='do_ok'>Do long calc - good status!</button></td>
<td><div id='status_ok'>Not Calculating yet.</div></td></tr> …Run Code Online (Sandbox Code Playgroud) 我正在尝试修改web_tree_image小部件.我希望在悬停或点击时显示更大的图像,而不是仅在列中显示小图像.为了实现这一点,我试图通过覆盖start函数来渲染窗口小部件后添加回调,如文档中所述.
因此,我将以下代码添加到web_tree_image.js:
openerp.web_tree_image = function (instance) {
instance.web.list.Image = instance.web.list.Column.extend({
// [...]
start: function() {
console.log("start called");
// [... add callbacks ...]
},
// [...]
});
};
Run Code Online (Sandbox Code Playgroud)
但是,start从不调用该函数,因此这不起作用.
我还没有完全理解通常会start被调用的代码路径,但似乎它在某种程度上是不同的web.list.Column.
应该start打电话给我,我做错了什么?或者在创建DOM元素之后还有另一种执行代码的方法吗?
该HTML5 规范,各国setTimeout可以在不这是应该经过多少毫秒将函数"处理程序"被安排说额外的"超时"的说法来运行.
handle = window . setTimeout( handler [, timeout [, arguments ] ] )
Schedules a timeout to run handler after timeout milliseconds. Any arguments are passed straight through to the handler.
Run Code Online (Sandbox Code Playgroud)
但是,我没有找到解释当没有设置"超时"时间段时会发生什么的任何地方.
一个示例用法是Raphael库中的动画实现.
animationElements[length] && win.setTimeout(animation);
Run Code Online (Sandbox Code Playgroud) 我想知道这两个代码块在Node.js中是否相同?
// Style 1
setTimeout(function () {
console.log('hello');
}, 0);
// Style 2
console.log('hello');
Run Code Online (Sandbox Code Playgroud)
从上面开始我0超时,应该没有等待时间.它是否与console.log('hello');不使用setTimeout直接调用相同?
请考虑以下HTML:
<html>
<head></head>
<body>
<input type="text" onblur="window.setTimeout('document.title += 2;', 0);" />
<input type="button" onclick="document.title += 1" />
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
并执行以下步骤:
现在,事件将按以下顺序发生:
在我得到的所有可访问的浏览器上测试:
document.title = '21' //Expected behavior
Run Code Online (Sandbox Code Playgroud)
但!在生产浏览器(Windows XP + IE 7)上,我得到:
document.title = '12' //Unexpected behavior
Run Code Online (Sandbox Code Playgroud)
我也尝试在我的本地机器(IE 10)上以IE 7模式模拟它,无法重现它.
这显然是我遇到的问题的简化示例.否则我可以简单地摆脱setTimeout.
在实际场景中,setTimeout调用实际上是由第三方脚本库(ASP.NET Dev Express组件)进行的.
除了这个问题的实际解决方案(我认为我可以处理),可以对这种行为应用什么解释?
更新:
使用表达式new Date().getTime()获取浏览器执行的每个步骤的时间.它发生如下:
1387369361417 //document.title += 1
1387369361433 //document.title += 2
Run Code Online (Sandbox Code Playgroud) 我想通过在js中为div添加一个类来为clickX设置转换动画.转换和转换属性将添加到css文件中.
var widget = document.getElementById('widget');
widget.style.display = 'block';
document.getElementById('widget2').clientWidth; //comment this line out and it wont work
widget.className = 'visible';
Run Code Online (Sandbox Code Playgroud)
它只有在我添加类之前查询dom 中任何元素的width属性时才有效.
这是一个jsfiddle:https://jsfiddle.net/5z9fLsr5/2/
任何人都可以解释为什么这不起作用?
关于此代码段,我有一个问题:
window.location.hash=1;
$(window).on('hashchange', function() {
alert('hello');
});
Run Code Online (Sandbox Code Playgroud)
上面的脚本应该这样做:
1alert('hello')这是问题:为什么 hashchange在第一次执行时第一次调用?这个脚本不应该只更改哈希而没有任何警报吗?
如何修复它以使其按照描述工作?
在使用 JavaScript 和 CSS 转换时,我尝试使用 JavaScript 和 innerHTML 动态插入 div 后立即删除 CSS 类。
我真的很惊讶地发现与蓝色 div 的不透明度相关的 CSS 转换没有按照我想要的方式触发(在 Safari 下工作,在 Chrome 下随机工作,在 Firefox Dev Edition 下不起作用)。有人可以解释这种现象吗?
我不确定为什么它的工作方式与红色 div 的工作方式不同。也许我不知道浏览器如何处理 innerHTML ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Having fun with JS</title>
<style>
.std {
width:100px;
height:100px;
opacity: 1;
transition: opacity 5s;
}
.std--hidden {
opacity: 0;
}
.std--red {
background-color: red;
}
.std--blue {
background-color: blue;
}
</style>
</head>
<body>
<button>click here</button>
<div class='std std--red std--hidden'></div>
<div class='insert-here'>
</div> …Run Code Online (Sandbox Code Playgroud)