有没有办法在HTML5视频上设置缩略图？我想在比赛前看一些照片.我的代码看起来像这样:
<video width="470" height="255" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>
谢谢!
我在网页上有一个dropzone.js实例,其中包含以下选项:
autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20
它以编程方式实例化,因为它是更大形式的一部分.在提交表单时,我已经完成了处理队列的操作.
我的目标是让我的用户能够使用dropzone来管理项目的图像,所以当我加载项目的"编辑/更新"视图时,我想用以前的图像预加载dropzone.已上传该项目.有没有一种很好的方法来实现这一点,以便在他们将更改提交到图像列表时不会重新上传已存在的项目？
我正在阅读"使用HTML5,CSS3和Javascript制作等距社交实时游戏".
我不是很远,而且我遇到了一个画布问题,这个问题让我在一天中的大部分时间都难过.
drawImage()似乎没有绘制.我已经研究过这个问题并尝试了许多预加载图像的排列,但到目前为止还没有任何工作.
这是我的代码:
HTML:
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas element.
</canvas>
CSS:
html {
height:100%;
overflow:hidden
}
body {
margin:0px;
padding:0px;
height:100%;
}
和js:
window.onload = function() {
var canvas = document.getElementById('game');
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
var c = canvas.getContext('2d');
function showIntro() {
var phrase = "Click or tap screen to start";
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, …我有Place模型和Event模型.地方可以在特定日期举办活动.
如何设置我的关联和查找器来加载所有位置,包括(急切加载)他们在特定日期的事件而没有N + 1查询问题？
我尝试过的:
class Place
has_many :events
end
Place.all.preload(:events).where("events.start_date > '#{time_in_the_future}'")
#ActiveRecord::StatementInvalid: PG::UndefinedTable: ERROR: missing FROM-clause entry for table "events".
Place.all.includes(:events).where("events.start_date > '#{time_in_the_future}'").references(:event)
# only loads places that have an event at the specific date and not all places including their events (if there are any events).
我成功地想出了一个能做我想要的但不是动态的关联(不接受参数)
class Place
has_many :events, -> {where("events.start_date > '#{Time.now}'")}
end
Place.all.preload(:events)
# perfect: executes two queries: One to get all 'places' and one to get all 'events' that …Chrome的新版本增加了支持<link rel="preload">.他们发布了大量有关原始文档参考的信息.有人可以提供关于它如何工作的简单解释,与没有的情况相比有什么不同rel="preload".
该preload指令未按预期在Chrome中执行.下面是一个完整的HTML页面,可以在Chrome中打开以进行结果比较.它应该应用所有5种字体; 相反,它只应用第一个预加载的字体,为应该是第二个字符制作一个虚假斜体,并简单地用默认的衬线代替剩下的3个字体.
此外,在开发人员的控制台中,对于五种字体中的每一种,此消息在大约3秒后出现:
The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
奇怪的是,它确实将第一个字体(Muli)应用于h1和h2标签(尽管为它制作了一个虚假的斜体h2); 您可以单击错误消息中的URL,并在开发人员的控制台中显示预加载字体的预览.
有什么问题在这里有什么不妥？(我在Windows 8.1专业版的Chrome 56上测试了这个.)
<!DOCTYPE html>
<html>
<head>
<title>Preload Font Test</title>
<link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxv79_ZuUxCigM2DespTnFaw.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v13/tI4j516nok_GrVf4dhunkg.woff2" as="font" type="font/woff2" …我想在 PHP 7.4 的生产服务器上启用opcache 预加载( RFC )。
如果它改变了任何东西，我正在使用Symfony 4。
我需要在给定特定来源的情况下获得图像的原始宽度和高度.我目前的方法是:
img.tag = "<img style='display:none;' src='" + img.src + "' />";
img.Owidth = 0;
img.Oheight = 0;
$(img.tag).load(function() {
img.Owidth = $(this).width();
img.Oheight = $(this).height();
}).appendTo(img.parent());
使用Owidth并Oheight成为加载图像的原始尺寸.我想知道是否有更好的方法来做到这一点:
预加载图像的最佳方法是什么？我正在尝试创建一个大约有59个图像的图像标签.这是我到目前为止的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Checklist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/systems_hr/Style%20Library/globalstyles_test.css">
<style type="text/css">
#innerframe {
width: 100%;
height: 63em;
}
</style>
<script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/styles.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
var id1 = new Image();
id1.src = "images/id1.png";
var id11 = new Image();
id11.src = "images/id1-1.png";
var id12 = new Image();
id12.src = "images/id1-2.png";
var id13 = new Image();
id13.src = "images/id1-3.png";
var id2 = new Image();
id2.src = …我有一个网站，我使用 webp 和 jpg 作为后备。在标题中，我有一个双图像和适合移动用户的较小图像。
所以我有4个文件：
header-big.webp
header-small.webp
header-big.jpg
header-small.jpg
因为它位于标题中，所以我希望预加载图像，但仅预加载我需要的图像。对于小和大的，我可以使用媒体属性预加载它。
<link rel="preload" href="header-small.jpg" as="image" type="image/jpg" media="(max-width: 575px)">
<link rel="preload" href="header-small.webp" as="image" type="image/webp" media="(max-width: 575px)">
<link rel="preload" href="header-big.jpg" as="image" type="image/jpg" media="(min-width: 576px)">
<link rel="preload" href="header-big.webp" as="image" type="image/webp" media="(min-width: 576px)">
在这种情况下，浏览器总是根据其宽度预加载两个文件，但仍然只使用其中一个。
jeah，这是有道理的，因为 jpg 和 webp 都可以实现。所以浏览器当然会预加载两者。
但我可以说“如果你支持 webp，就预加载 webp 并且不预加载 jpg”吗？
谢谢，弗洛里安
preloading ×10
html ×2
html5 ×2
javascript ×2
jquery ×2
activerecord ×1
browser ×1
canvas ×1
css ×1
drawimage ×1
dropzone.js ×1
fonts ×1
html5-video ×1
hyperlink ×1
image ×1
jpeg ×1
opcache ×1
php ×1
php-7.4 ×1
preload ×1
preloader ×1
preview ×1
ruby ×1
webp ×1