天道酬勤,学无止境

确定HTML5画布中字符串的宽度(Determine width of string in HTML5 canvas)

问题

我正在图像(模因生成器)顶部的HTML5画布中绘制文本。 我想计算一个字体大小,以便该字符串跨越画布的整个宽度。

因此,基本上,JavaScript中是否有一种方法可以确定对于给定宽度的某种字体的某些字符串我应该使用哪种字体大小?

回答1

fillText()方法有一个可选的第四个参数,它是呈现字符串的最大宽度

MDN的文档说...

maxWidth

可选的; 绘制的最大宽度。 如果指定了该字符串,并且计算出的字符串的宽度大于此宽度,则将字体调整为使用水平方向更紧凑的字体(如果可用,或者可以通过水平缩放当前字体来合成合理可读的字体)或更小字体。

但是,在撰写本文时,跨浏览器还不支持该参数,这导致第二种解决方案使用measureText()来确定字符串的尺寸而不渲染它。

var width = ctx.measureText(text).width;

这是我可能会做的...

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

// Font sizes must be in descending order. You may need to use `sort()`
// if you can't guarantee this, e.g. user input.
var fontSizes = [72, 36, 28, 14, 12, 10, 5, 2],
    text = 'Measure me!';

// Default styles.
ctx.textBaseline = 'top';
ctx.fillStyle = 'blue';

var textDimensions,
    i = 0;

do {
   ctx.font = fontSizes[i++] + 'px Arial';
   textDimensions = ctx.measureText(text);        
} while (textDimensions.width >= canvas.width);

ctx.fillText(text, (canvas.width - textDimensions.width) / 2, 10);​

jsFiddle。

我有一个字体大小列表,以降序排列,并遍历该列表,确定渲染的文本是否适合画布尺寸。

如果可以,我将使文本中心对齐。 如果必须在文本的左侧和右侧填充(看起来会更好), textDimensions.width在计算文本是否适合时,将填充值添加到textDimensions.width

如果要尝试的字体大小列表很长,最好使用二进制搜索算法。 但是,这将增加代码的复杂性。

例如,如果您有200种字体大小,则遍历数组元素的线性O(n)迭代可能会非常缓慢。

二进制印章应为O(log n)。

这是功能的胆量

var textWidth = (function me(fontSizes, min, max) {

    var index = Math.floor((min + max) / 2);

    ctx.font = fontSizes[index] + 'px Arial';

    var textWidth = ctx.measureText(text).width;

    if (min > max) {
        return textWidth;
    }

    if (textWidth > canvas.width) {
        return me(fontSizes, min, index - 1);
    } else {
        return me(fontSizes, index + 1, max);
    }

})(fontSizes, 0, fontSizes.length - 1);

jsFiddle。

回答2

我有下一个代码,它非常适合我。 也许有一个小错误,但我不需要字体大小列表。 我只是获得带有字体大小的宽度,如果太大,我会根据画布的宽度和填充来计算比例大小(50)

ctx.font = FONT_SIZE+"pt Verdana";
var textWidth = ctx.measureText(markText).width;
if(textWidth > canvas.width - 50) {
    ctx.font = parseInt(FONT_SIZE*(canvas.width-50)/textWidth)+"pt Verdana";
    textWidth = ctx.measureText(markText).width;
}
ctx.textBaseline = "middle";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.strokeStyle = "rgba(0,0,0,0.5)";
var xT = image.width / 2 - textWidth / 2;
var yT = image.height / 2;
ctx.fillText(markText, xT, yT);
ctx.strokeText(markText, xT, yT);

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • HTML5画布100%宽度视口高度?(HTML5 Canvas 100% Width Height of Viewport?)
    问题 我正在尝试创建一个画布元素,该元素占用视口的宽度和高度的100%。 您可以在我的示例中看到这种情况的发生,但是它同时在Chrome和FireFox中添加了滚动条。 如何防止多余的滚动条,仅将窗口的宽度和高度精确地设置为画布的大小? 回答1 为了使画布始终保持全屏宽度和高度,这意味着即使调整了浏览器的大小,也需要在将画布调整为window.innerHeight和window.innerWidth的函数中运行绘制循环。 示例:http://jsfiddle.net/jaredwilli/qFuDr/ 的HTML <canvas id="canvas"></canvas> 的JavaScript (function() { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); // resize the canvas to fill browser window dynamically window.addEventListener('resize', resizeCanvas, false); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window
  • Resize HTML5 canvas to fit window(Resize HTML5 canvas to fit window)
    问题 如何自动缩放HTML5 <canvas>元素以适合页面? 例如,我可以通过将height和width属性设置为100%来缩放<div> ,但是<canvas>不能缩放,是吗? 回答1 我相信我已经找到了一个优雅的解决方案: 的JavaScript /* important! for alignment, you should make things * relative to the canvas' current width/height. */ function draw() { var ctx = (a canvas context); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; //...drawing code... } 的CSS html, body { width: 100%; height: 100%; margin: 0; } 到目前为止,对我没有太大的负面性能影响。 回答2 以下解决方案最适合我。 由于我对编码还比较陌生,因此我希望直观地确认某件事正在按我的预期方式工作。 我在以下站点找到它:http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/ 这是代码: <!DOCTYPE
  • HTML5中的画布宽度和高度(Canvas width and height in HTML5)
    问题 是否可以固定HTML5 canvas元素的宽度和高度? 通常的方法如下: <canvas id="canvas" width="300" height="300"></canvas> 回答1 canvas DOM元素具有.height和.width属性,它们与height="…"和width="…"属性相对应。 在JavaScript代码中将它们设置为数值,以调整画布的大小。 例如: var canvas = document.getElementsByTagName('canvas')[0]; canvas.width = 800; canvas.height = 600; 请注意,这将清除画布,尽管您应遵循ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); 来处理那些没有完全清除画布的浏览器。 尺寸更改后,您需要重绘要显示的所有内容。 进一步注意的是,高度和宽度是用于绘制逻辑帆布尺寸和来自不同style.height和style.width CSS属性。 如果您未设置CSS属性,则画布的固有大小将用作其显示大小; 如果您确实设置了CSS属性,并且它们与画布尺寸不同,则将在浏览器中缩放内容。 例如: // Make a canvas that has a blurry pixelated zoom-in //
  • 如何找到HTML画布上文本的高度?(How can you find the height of text on an HTML canvas?)
    问题 规范中有一个context.measureText(text)函数,该函数将告诉您打印该文本需要多少宽度,但是我找不到找到高度的方法。 我知道它是基于字体的,但是我不知道将字体字符串转换为文本高度。 回答1 更新-作为此工作的示例,我在Carota编辑器中使用了此技术。 继ellisbben的回答之后,这是一个增强版本,可从基线获得上升和下降,即与Win32的GetTextMetric API返回的tmAscent和tmDescent相同。 如果您想用不同字体/大小的跨度进行文字包装的文本,则需要这样做。 上面的图像是在Safari中的画布上生成的,红色是指示画布绘制文本的最上面一行,绿色是基线,蓝色是底部(所以红色到蓝色是完整高度)。 使用jQuery简洁: var getTextHeight = function(font) { var text = $('<span>Hg</span>').css({ fontFamily: font }); var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>'); var div = $('<div></div>'); div.append(text, block); var body = $('body'); body
  • 如何修复HTML5画布中的模糊文本?(How do I fix blurry text in my HTML5 canvas?)
    问题 我总的n00b HTML5和我有工作canvas渲染形状,颜色和文字。 在我的应用程序中,我有一个视图适配器,可以动态创建画布,并用内容填充它。 效果非常好,除了我的文本非常模糊/模糊/拉伸。 我还看到了许多其他文章,说明为什么在CSS定义宽度和高度会导致此问题,但我在javascript都定义了这些内容。 相关代码(查看小提琴): var width = 500;//FIXME:size.w; var height = 500;//FIXME:size.h; var canvas = document.createElement("canvas"); //canvas.className="singleUserCanvas"; canvas.width=width; canvas.height=height; canvas.border = "3px solid #999999"; canvas.bgcolor = "#999999"; canvas.margin = "(0, 2%, 0, 2%)"; var context = canvas.getContext("2d"); ////////////////// //// SHAPES //// ////////////////// var left = 0; //draw zone 1 rect context
  • 如何在html5画布中绘制椭圆形?(How to draw an oval in html5 canvas?)
    问题 似乎没有绘制椭圆形形状的本机功能。 我也不是在寻找鸡蛋的形状。 是否可以绘制具有2个贝塞尔曲线的椭圆形? 有人遇到过吗? 我的目的是画一些眼睛,实际上我只是使用弧线。 提前致谢。 解决方案 因此,scale()更改所有下一个形状的缩放比例。 Save()之前保存设置,还原用于还原设置以绘制新形状而无需缩放。 感谢Jani ctx.save(); ctx.scale(0.75, 1); ctx.beginPath(); ctx.arc(20, 21, 10, 0, Math.PI*2, false); ctx.stroke(); ctx.closePath(); ctx.restore(); 回答1 更新: 缩放方法可能会影响笔触宽度的外观正确的缩放方法可以保持笔触宽度完整画布具有Chrome现在支持的椭圆方法向JSBin添加了更新的测试 JSBin测试示例(已更新以测试其他人的答案以进行比较) 贝塞尔曲线-基于包含矩形和宽度/高度的左上方绘制带中心的贝塞尔曲线-根据中心和宽度/高度绘制圆弧和缩放-基于绘制圆和缩放进行绘制见德文·卡拉(Deven Kalra)的答案二次曲线-用二次曲线绘制测试似乎不完全相同,可能是实现看到oyophant的答案画布椭圆-使用W3C标准ellipse()方法测试似乎不完全相同,可能是实现见洛克塔尔的答案 原来的: 如果您想要一个对称的椭圆形
  • HTML5画布:缩放(HTML5 Canvas: Zooming)
    问题 有什么简单的方法可以在画布(JavaScript)中进行放大和缩小吗? 基本上,我有一个400x400px的画布,我希望能够使用“ mousedown”(2x)进行放大,然后再使用“ mouseup”进行回退。 最近两天用了谷歌搜索,但到目前为止还没有运气。 :( 回答1 在使用drawImage的建议的基础上,您还可以将其与scale函数结合使用。 因此,在绘制图像比例之前,请先将上下文缩放到所需的缩放级别: ctx.scale(2, 2) // Doubles size of anything draw to canvas. 我在这里http://jsfiddle.net/mBzVR/4/创建了一个小示例,该示例使用drawImage和scale来放大mousedown并缩小mouseup。 回答2 只需尝试一下: <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <style> body { margin: 0px; padding: 0px; } #wrapper { position: relative; border: 1px solid
  • 在HTML5画布上绘制旋转文本(Drawing rotated text on a HTML5 canvas)
    问题 我正在开发的Web应用程序的一部分要求我创建条形图以显示各种信息。 我认为,如果用户的浏览器具有功能,则可以使用HTML5 canvas元素绘制它们。 我没有为我的图形绘制线条和条形的问题,但是当涉及到标注轴,条形或线的标签时,我遇到了麻烦。 如何将旋转的文本绘制到画布元素上,使其与要标记的项目对齐? 几个示例包括: 逆时针旋转文本90度以标记y轴逆时针旋转文本90度以在垂直条形图上标记条形图任意旋转文本以标记折线图上的线 任何指针将不胜感激。 回答1 就像其他人提到的那样,您可能想看看重用现有的图形解决方案,但是旋转文本并不是太困难。 (对我而言)有些令人困惑的一点是,您旋转了整个上下文然后在其上进行绘制: ctx.rotate(Math.PI*2/(i*6)); 角度以弧度为单位。 该代码取自该示例,我相信该示例是为MDC画布教程的转换部分制作的。 请参阅下面的答案以获取更完整的解决方案。 回答2 发布此信息是为了帮助有类似问题的其他人。 我通过五步方法解决了这个问题-保存上下文,转换上下文,旋转上下文,绘制文本,然后将上下文还原为其保存状态。 我认为平移和转换为上下文是操纵覆盖在画布上的坐标网格。 默认情况下,原点(0,0)从画布的左上角开始。 X从左到右增加,Y从上到下增加。 如果您用左手的食指和拇指做一个“ L”,并在您的拇指向下的情况下将其按住在您的面前
  • HTML5自适应画布:调整浏览器画布的大小消失(HTML5 responsive canvas: resizing the browser canvas draw disappear)
    问题 我想使用百分比来制作自适应画布,一旦用户调整窗口的大小,画布就会相对调整。 我可以使用下面的代码来缩放画布,但是唯一的问题是当我缩放鼠标绘图消失的窗口大小时。 <style> body{margin:0px;padding:0px;background:#a9a9a9;} #main{ display:block; width:80%; padding:50px 10%; height:300px; } canvas{display:block;background:#fff;} </style> </head> <body> <div id="main" role="main"> <canvas id="paint" width="100" height="100"> < !-- Provide fallback --> </canvas> </div> <script> var c = document.getElementById('paint'); var ctx = c.getContext('2d'); var x = null; var y; c.onmousedown = function(e){ x = e.pageX - c.offsetLeft; y = e.pageY - c.offsetTop; ctx.beginPath(); ctx.moveTo
  • 如何在HTML5 canvas元素上编写文本?(How can I write text on a HTML5 canvas element?)
    问题 是否可以在HTML5 canvas上编写文本? 回答1 var canvas = document.getElementById("my-canvas"); var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.font = "bold 16px Arial"; context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8); #my-canvas { background: #FF0; } <canvas id="my-canvas" width="200" height="120"></canvas> 回答2 在画布上绘制文本 标记: <canvas id="myCanvas" width="300" height="150"></canvas> 脚本(有几个不同的选项): <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.font = 'italic 18px Arial'; ctx.textAlign = 'center'; ctx
  • 通过CSS的HTML5 Canvas大小与元素属性(Size of HTML5 Canvas via CSS versus element attributes)
    问题 我不明白为什么以下代码段会产生不同的结果,因为CSS会在画布放大时缩放画布, <style> #canvas { width: 800px; height: 600px; } </style> <canvas id="canvas"></canvas> 与这种方法相反(按预期工作): <canvas id="canvas" width="800px" height="600px"></canvas> 回答1 想一想如果您的JPG为32x32(总像素为1024),但是通过CSS指定应显示为width:800px; height:16px会发生什么情况width:800px; height:16px width:800px; height:16px 。 同样的事情也适用于HTML Canvas: canvas元素本身的width和height属性决定了您可以绘制多少像素。 如果您未指定canvas元素的高度和宽度,请按照规范进行: “ width属性默认为300,height属性默认为150。” width和height CSS属性控制元素在屏幕上显示的大小。 如果未设置CSS尺寸,则将元素的固有尺寸用于布局。 如果在CSS中指定的尺寸与画布的实际尺寸不同,则必须根据显示的需要由浏览器拉伸和压紧它。 您可以在这里看到一个示例:http://jsfiddle.net/9bheb/5
  • 调整HTML5画布中图像的大小(Resizing an image in an HTML5 canvas)
    问题 我正在尝试使用javascript和canvas元素在客户端创建缩略图,但是当我缩小图像时,它看起来很糟糕。 看起来好像是在Photoshop中缩小了尺寸,将重采样设置为“最近的邻居”而不是Bicubic。 我知道有可能使它看起来正确,因为该站点也可以使用画布来很好地完成它。 我已经尝试使用与[[Source]]链接中所示相同的代码,但是看起来仍然很糟糕。 有什么我想念的东西,需要设定的东西或其他东西吗? 编辑: 我正在尝试调整jpg的大小。 我尝试在链接的网站和photoshop中调整相同jpg的大小,缩小尺寸时看起来还不错。 以下是相关代码: reader.onloadend = function(e) { var img = new Image(); var ctx = canvas.getContext("2d"); var canvasCopy = document.createElement("canvas"); var copyContext = canvasCopy.getContext("2d"); img.onload = function() { var ratio = 1; if(img.width > maxWidth) ratio = maxWidth / img.width; else if(img.height > maxHeight)
  • 如何在浏览器中通过Javascript压缩图像?(How to compress an image via Javascript in the browser?)
    问题 TL; DR; 上传之前,有没有一种方法可以直接在浏览器端压缩图像(主要是jpeg,png和gif)? 我很确定JavaScript可以做到这一点,但是我找不到实现它的方法。 这是我要实现的完整方案: 用户访问我的网站,并通过input type="file"元素选择图片, 该图片是通过JavaScript检索的,我们进行了一些验证,例如正确的文件格式,最大文件大小等, 如果一切正常,则会在页面上显示图像的预览, 用户可以执行一些基本操作,例如将图像旋转90°/ -90°,按照预定义的比例进行裁剪等,或者用户可以上传其他图像并返回到第1步当用户满意时,然后将编辑后的图像压缩并本地“保存”(不保存到文件中,而是保存在浏览器的内存/页面中),- 用户使用姓名,年龄等数据填写表单, 用户单击“完成”按钮,然后将包含数据和压缩图像的表单发送到服务器(不使用AJAX), 直到最后一步的整个过程都应该在客户端完成,并且应该与最新的Chrome和Firefox,Safari 5+和IE 8+兼容。 如果可能的话,应该只使用JavaScript(但我很确定这是不可能的)。 我现在还没有编写任何代码,但是我已经考虑过了。 可以通过File API在本地读取文件,可以使用Canvas元素完成图像预览和编辑,但是我找不到找到图像压缩部分的方法。 根据html5please.com和caniuse
  • HTML5 Canvas相机/视口-实际如何做?(HTML5 Canvas camera/viewport - how to actually do it?)
    问题 我确定这是在1000年前解决的:我得到了一个960 * 560大小的画布和一个5000 * 3000大小的房间,根据玩家所在的位置,总是只能绘制960 * 560的房间。 玩家应该始终处于中间位置,但是当靠近边界时-应该计算出最佳视角)。 播放器可以使用WASD或箭头键完全自由移动。 并且所有对象都应该移动-而不是我移动除玩家以外的所有其他物体,以创建玩家移动的错觉。 我现在找到了这两个问题: HTML5-为画布创建视口,但是仅对于这种类型的游戏,我无法为我复制代码。 更改html5画布的视图“中心”似乎更有希望,也可以执行,但是我仅理解它是为了相对于播放器正确绘制所有其他对象,而不是如何相对于播放器滚动画布视口,我想要首先要实现。 我的代码(简化了-游戏逻辑是单独的): var canvas = document.getElementById("game"); canvas.tabIndex = 0; canvas.focus(); var cc = canvas.getContext("2d"); // Define viewports for scrolling inside the canvas /* Viewport x position */ view_xview = 0; /* Viewport y position */ view_yview = 0; /*
  • HTML5 Canvas垂直和水平滚动(Html5 canvas scrolling vertically and horizontally)
    问题 <!DOCTYPE html> <html> <head> <style type="text/css"> #canvasOne { border: 1px solid black; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> </head> <body> <div align="center"> <canvas id="canvasOne"> </canvas> </div> <script type="text/javascript"> var myCanvas = document.getElementById("canvasOne"); var myContext = myCanvas.getContext("2d"); var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; init(); var numShapes; var shapes
  • 在动画HTML5画布中缩放和平移(Zoom and pan in animated HTML5 canvas)
    问题 我有一张地图。 我希望用户能够缩放和平移地图。 想象一下Google Maps,但是它不是正方形,而是正方形(如果您超过它的边缘,它将不会再次环绕)。 我已经使用scale()和translate()实现了缩放和平移。 这些效果很好。 我被困在最后一部分-当用户缩放时,我想将缩放集中在该点附近。 很难用语言来解释,所以只需想象一下,当您在Google Maps中鼠标滚轮时会发生什么-这就是我想要的。 我已经用标题中的任何这些术语查看了SO的所有答案。 大多数是这一版本的变体,基本上说这是我需要做的: ctx.translate(/* to the point where the mouse is */); ctx.scale(/* to zoom level I want */) ctx.translate(/* back to the point where the mouse was, taking zoom into account */); 但是,无论我做什么,我似乎都无法正常工作。 缩放后可以将其缩放到特定点,但是无论如何我都无法使该点等于鼠标指针所在的位置。 看看这个小提琴。 想象一下,正方形是地图,圆圈是国家或其他任何国家。 我发现的最佳实现是此SO答案和链接的示例。 但是,该代码利用了SVG和.createSVGMatrix()以及坦率地说我无法理解的各种东西
  • 如何使用HTML5水平翻转图像(How to flip images horizontally with HTML5)
    问题 在IE中,我可以使用: <img src="http://example.com/image.png" style="filter:FlipH"> 实现水平翻转图像。 有没有办法在HTML5中水平翻转? (也许通过使用画布?) 谢谢大家:) 回答1 canvas = document.createElement('canvas'); canvasContext = canvas.getContext('2d'); canvasContext.translate(width, 0); canvasContext.scale(-1, 1); this.canvasContext.drawImage(image, 0, 0); 这是一个用于测试的Sprite对象的片段,它产生了您似乎期望的结果。 这是另一个具有更多详细信息的站点。 http://andrew.hedges.name/widgets/dev/ 回答2 您不需要HTML5,可以使用与IE中相同的CSS来完成: -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipH; 回答3 我喜欢上面的Eschers功能。
  • 在html5画布上拖动图像并调整其大小(dragging and resizing an image on html5 canvas)
    问题 我正在构建HTML5画布图像编辑器。 将图像上传到画布后,我需要拖动并在画布上调整其大小。 我设法上传了图片,并使其在画布上可拖动。 但是我需要使它在画布上也可调整大小。 提前致谢。 var Img = new Image(); Img.src = file; Img.onload = function () { context.drawImage(Img, 50, 0, 200, 200); } mouseMove = function (event){ if (down) { context.clearRect(0,0,800,500); context.translate(0, -50); context.drawImage(Img, (event.clientX - offsetX), (event.clientY - offsetY), 200, 200); context.translate(0, 50); } } mouseUp = function () { down = false; } mouseDown = function () { down = true; } canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup'
  • 如何拍摄基于HTML5-JavaScript的视频播放器的快照?(How to take a snapshot of HTML5-JavaScript-based video player?)
    问题 实际上,我有一个具有JavaScript功能的HTML5页面,该页面允许我播放wmv视频文件。 视频播放时(有暂停或无暂停)并以任何图像格式JPG或BMP保存时,我需要拍摄快照。 任何帮助将不胜感激。 谢谢你。 <!DOCTYPE HTML> <html> <head> <title>HTML5 video</title> <script type="text/javascript"> function checkPlay() { var myVideo = document.getElementById("myVid"); var ytStr = '<iframe width="500" height="500" src="C:\XA0002.wmv" frameborder="0" allowfullscreen></iframe>'; try { var canPlay = document.getElementsByTagName('video')[0].canPlayType("video/wmv"); if ((canPlay == "no") || (canPlay == "")) { myVideo.innerHTML = ytStr; } new MediaElement(v, { success: function (media) { media.play
  • HTML5视频缓冲属性功能(HTML5 Video buffered attribute features)
    问题 我正在设计一个自定义HTML5视频播放器。 因此,它将具有自己的自定义滑块来模仿视频进度,因此我需要了解HTML5视频的整个缓冲效果。 我碰到了这篇文章:视频缓冲。 它说缓冲对象由多个时间范围组成,这些时间范围以开始时间的线性顺序排列。 但是我找不到以下内容: 说视频开始。 它自己继续上升到1:45(有时会停顿,等待更多数据),此后我突然跳到32:45。 现在过了一段时间,如果我跳回到1:27(在我进行跳转之前,在最初加载并播放的时间范围内),它会像以前已经加载的那样立即开始播放吗? 还是因为我跳了跳而丢失了那部分,必须再次提取? 无论哪种方式,行为对于所有此类情况都是一致的吗? 假设我进行了5或6次这样的跳转,每次等待几秒钟,以便在跳转之后加载一些数据。 这是否意味着该buffered对象将存储所有这些时间范围? 还是有些人会迷路? 这是一堆东西吗,随着进一步的跳转,随着更多范围的加载,更早的范围会弹出吗? 是否将检查buffered对象是否具有从0(忘记实时流)开始到视频持续时间长度结束的一个时间范围,以确保整个视频资源已完全加载? 如果不是,是否有办法知道整个视频已下载并且可以搜索到任何部分,从中可以连续播放视频直到结束而没有延迟? W3C规范对此并不十分清楚,我也找不到合适的大型(例如一个多小时)远程视频资源进行测试。 回答1 视频的缓冲方式取决于浏览器的实现方式