自从该网站的 v9 版本发布后，我一直在 SublimeVideo 中使用视频播放器，用于 屏幕录制区域。 SublimeVideo 类似于 VideoJS 和 MediaElement.js 等项目，它是一个 polyfill，用于 HTML5 视频。 也就是说，您使用常规的简洁 HTML5 <video> 标记，它会确保视频可以在尽可能多的浏览器/平台/版本上看到。
SublimeVideo 与其他项目有何不同？
- 它们托管资源，而不是您。 这意味着节省了一些带宽，但更重要的是，这意味着您始终能获得最新最好的版本，这在快速变化的浏览器环境中很重要。
- 它是所有这些项目中最漂亮的。 我认为是主观的。
- 它不是免费的。 而其他项目是免费的。
我非常喜欢为 使我们前端开发人员生活更轻松的服务付费 的想法，所以我加入了进来（我为 Star 计划的服务付费）。
请注意，SublimeVideo 用于您自己托管在某个地方的视频。 它们不会为您托管视频。 如果您想要托管视频以及类似地在任何地方都能正常使用的播放器，而不必担心带宽，您可能应该只使用 YouTube、Vimeo 或 Blip.tv。
定期使用 SublimeVideo 时，您只需在 <head> 中加载它们的 JavaScript
<script src="//cdn.sublimevideo.net/js/YOURTOKEN.js"></script>然后像这样使用 HTML5 视频
<video class="sublime" width="640" height="360" poster="video-poster.jpg" preload="none">
<source src="//yoursite.com/video.mp4" />
<source src="//yoursite.com/video.webm" />
</video>这非常有效，但生成的视频播放器具有固定宽度和高度。 在像我这里这样的自适应宽度/响应式网站中，固定尺寸的媒体不能很好地播放。 我更希望视频能够根据需要随着它所在的列一起缩小和放大。
我已经多次解决过自适应宽度视频的想法。 最终，我帮助开发了 FitVids.js，这是一个 jQuery 插件，用于轻松地使来自最受欢迎来源的所有视频都可以在自适应宽度设计中工作。 不幸的是，FitVids.js 不适用于 SublimeVideo。 为了便于解释，它们只是不同的东西，使它们协同工作会比它值得的麻烦更多。
不过好消息是，经过一番恳求（我确信他们收到了很多关于此方面的请求），他们发布了一个新的 API 部分，专门用于调整大小。 因此，使视频宽度自适应就像监视 window.resize 事件一样简单，当它触发时，计算新的宽度和高度，并使用 sublimevideo.resize 函数进行更改。
这是我使用的完整代码。 其中有一些额外的奖励部分，通过代码注释进行了解释。 请注意，此代码使用了少量 jQuery。 另请注意，<video> 元素上的“sublime”类已删除。
<video id="the-video" width="570" height="320" poster="poster.jpg" controls preload="none">
...
</video>
<script>
(function() {
// Prevents some flickering
$('#the-video').css("visibility", "hidden");
// Fluid column video is inside of
var fluidParent = $(".main-column"),
newWidth, newHeight;
// Gets called when video needs resizing
function resizeVideo() {
newWidth = fluidParent.width();
// 1.78125 == Aspect Ratio of my videos
sublimevideo.resize('the-video', newWidth, newWidth/1.78125);
};
$(window).resize(function() {
resizeVideo();
});
// When the resources are ready,
// load up the video and size it correctly
sublimevideo.ready(function() {
sublimevideo.prepare('the-video');
resizeVideo();
});
}());
</script>如果您想查看它的实际效果，可以在 单个视频页面 上查看。
只是想告诉你...它在我的机器上并不真正起作用
Macbook PRO，Chrome 14，双显示器设置。
当我转到此页面时
笔记本电脑屏幕闪烁了一会儿...然后我听到了音频...但实际上没有开始播放视频。 :(
我在（令人毛骨悚然地）完全相同的硬件和浏览器上遇到了同样的问题。
在 iMac 上使用 v14 Chrome 出现相同的问题。
是我的错，理论上隐藏可见性是一个好主意，但它导致了黑色视频。 SublimeVideo 很酷的另一个原因是...他们 在他们那边修复了它 并立即部署了一个修复程序。
视频是带音频的黑屏，伙计们，拜托...
您没有看到视频的原因是上面的代码中包含这行代码，它隐藏了视频元素
$(‘#the-video’).css(“visibility”, “hidden”)
我们现在已经部署了 SublimeVideo 播放器的新版本，它负责在视频开始后覆盖可见性属性。
嘿，Chris，
我知道您曾经考虑过这个问题，但您是否认为它可以在不需要 $(window).resize() 的情况下工作？
为视频创建固有比例
理想情况下，它应该能够做到。 我会向他们提出来，看看是否有可能。 我认为他们在 API 中提供一个 resize 方法很好，因为它的存在，意味着这项技术*现在*就能起作用，这很棒。
嘿，Chris，
对于您的演示文稿，您是否考虑过使用一些东西来同步视频和幻灯片？
http://www.arcticfoxtv.com
它每月收费，但能让您更轻松地展示演示文稿！
哈哈，每月 50 美元，他们甚至不托管视频？！ 哇...呃...呃...不予置评...
我注意到我有多不喜欢 css-tricks 视频播放器，它在切换到 Flash 时不会全屏显示，这太烦人了。 我可能不会花 50 美元买一个似乎很差的东西。
伙计，您应该创建一个免费的 HTML5 视频 polyfill 托管服务，它具有该功能。 如果它一样快，设计一样好，并且您能及时更新它，我就会切换到它。
将此绑定到 window resize 绝对是您需要进行防抖处理的
http://benalman.com/projects/jquery-throttle-debounce-plugin/
我正在尝试寻找一个视频播放器，它提供使用提示点、JavaScript 控件甚至 popcorn.js 进行一些惊人的集成的功能。
我希望视频播放器能够从 YouTube 获取内容，以获得 SEO 优势（以及免费的视频托管），但仍能很好地集成到使用 FitVids.js 或您在这里介绍的 Sublime 播放器类似 API 方法的响应式网站设计中。
JW Player 可能是这个解决方案，但我想知道您是否愿意介绍一下如何使 FlowPlayer 宽度自适应？ http://flowplayer.org/demos/index.html
这似乎最有希望！ 有想法吗？
抱歉打扰了，但 MediaElement.js 的用户刚刚向我询问了这篇文章，我认为值得一提的是 http://mediaelementjs.com/ 支持执行 [video width="100%" height="100%"]。 继续吧。
我在这里难以弄清楚我在尝试使其起作用时哪里错了。 我使用的是内置了 fitvids 的主题（并且尝试过让您的调整与 fitvids.js 启用和禁用都一起工作）。 我已经安装了 SublimeVideo 插件，并且尝试过使用他们的嵌入代码工具嵌入视频（SV 播放器加载但不会调整大小），以及使用您在示例中使用的标准 HTML5 嵌入代码（无法让 SV 播放器加载）。 我认为我已经正确设置了您的脚本。 到目前为止，我尝试过的各种组合都没有使视频播放器随着我的主题窗口大小的变化而调整大小。
我能看到的一个明显的差异是 jQuery 版本不同（我的主题使用的是 1.6.1，而您使用的是 1.7.1）
任何帮助将不胜感激。
开发页面链接是：http://vancom.infectious.ca/solutions/
提前感谢您提供任何见解。
我知道这是一个旧话题，但由于它在搜索中排名仍然很高，所以我认为我应该加入一个适用于 Sublime 最新版本的更简单的方法。
如果需要视频具有特定大小，然后为较小的屏幕缩小尺寸，我只需将 Sublime 代码包装在一个 div 中，并将其“max-width”设置为我想要的视频宽度，并将“width”设置为 100%。
在 Sublime 代码中，我没有包含高度和宽度，并设置了 data-autoresize=”fit”。