javascript - 在脚本中设置 src 时未加载视频

Question

我刚刚从《HTML5 Canvas》一书中复制了一些示例，它在 JavaScript 中加载视频并在 Canvas 上显示该视频；

基本代码如下:

videoElement = document.createElement("video");
videoDiv = document.createElement("div");
document.body.appendChild(videoDiv);
videoDiv.appendChild(videoElement);

videoElement.setAttribute("src", "url to the video");
videoElement.addEventListener("canplaythrough", videoLoaded, false);

假设 videoLoaded 应该在加载视频后调用，但事实并非如此；

我在firebug中检查了它，它显示浏览器只是不断加载视频，但没有获取内容；

我刚刚将 Firefox 从 v17 升级到 v18。

它在 V17 中有效。

有人可以帮我解决这个问题吗？谢谢。

Answer 1

尝试在不使用“setAttribute”函数的情况下设置源。您还需要启用控件才能使大多数浏览器实际运行。

替换:

videoElement.setAttribute("src", "url to the video");

与:

videoElement.src = 'http://static.bouncingminds.com/ads/5secs/baileys_5sec.mp4';
videoElement.width = 320;
videoElement.height = 240;
videoElement.controls = true;

有other options您可以应用于视频标签，我建议考虑的其中之一是“预加载”

以上代码均可在 Chrome 上运行...我还建议不要依赖 HTML5，因为并非所有浏览器都支持。有一些很好的后备选项，例如 VideoJS和 JWPlayer它将播放浏览器支持的内容，而不是强制使用 HTML5 或 Flash

编辑:我刚刚注意到“FireFox”——用其他内容替换 .mp4 视频，FF 与 mp4 的播放效果不佳