javascript Chrome 中的 HTML5 视频无法在 mp4 下运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10839396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video in Chrome not working under mp4
提问by Mike
I'm working on a simple site to display a video on a canvas. The video displays but it just is stuck at the first frame, I have controls set and autoplay neither show up nor does the video play.
我正在一个简单的网站上工作以在画布上显示视频。视频显示但它只是停留在第一帧，我设置了控件并且自动播放既不显示也不播放视频。
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
@section Scripts
{
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"> </script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
var firstVideo, secondVideo, videoSource
var videoDiv;
function eventWindowLoaded() {
firstVideo = document.createElement("video");
videoSource = document.createElement("source");
firstVideo.appendChild(videoSource);
//secondVideo = document.createElement("video");
videoDiv = document.createElement('div');
document.body.appendChild(videoDiv);
videoDiv.appendChild(firstVideo);
//videoDiv.appendChild(secondVideo);
videoDiv.setAttribute("style", "display:none;");
var videoType = supportedVideoFormat(firstVideo);
if (videoType == "") {
alert("no video support");
return;
}
videoSource.setAttribute("src", "/Content/QualitySample." + videoType);
videoSource.setAttribute("type", "video/mp4");
firstVideo.setAttribute("controls", "controls");
firstVideo.setAttribute("autoplay", "autoplay");
firstVideo.addEventListener("canplaythrough", videoLoaded, false);
//secondVideo.setAttribute("src", "/Content/QualitySample." + videoType);
//secondVideo.setAttribute("controls", "controls");
//secondVideo.addEventListener("canplaythrough", videoLoaded, false);
}
function supportedVideoFormat(video) {
var returnExtension = "";
if (video.canPlayType("video/mp4") == "probably" ||
video.canPlayType("video/mp4") == "maybe") {
returnExtension = "mp4";
} else if (video.canPlayType("video/webm") == "probably" ||
video.canPlayType("video/webm") == "maybe") {
returnExtension = "webm";
} else if (video.canPlayType("video/ogg") == "probably" ||
video.canPlayType("video/ogg") == "maybe") {
returnExtension = "ogg";
}
return returnExtension;
}
function canvasSupport() {
return Modernizr.canvas;
}
function videoLoaded(event) {
canvasApp();
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
function drawScreen() {
//Background
context.fillStyle = '#ffffff';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(5, 5, theCanvas.width - 10, theCanvas.height - 10);
//video
context.drawImage(firstVideo, 60, 50, 200, 200);
//context.drawImage(secondVideo, 260, 50, 200, 200);
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
//firstVideo.load();
firstVideo.play();
//secondVideo.play();
setInterval(drawScreen, 33);
}
} when the page loads the video is displayed on the canvas and the video is loaded but no controls are active nor does it play.
当页面加载时，视频会显示在画布上，并且视频已加载，但没有控件处于活动状态，也不会播放。
回答by JayC
MP4 is a media file type. However, MP4 can support any number of different Codecs. Some Codecs are protected by patents, so Chrome might not be able to use certain Codecs. Make sure the Codec of your video is supported.
MP4 是一种媒体文件类型。但是，MP4 可以支持任意数量的不同编解码器。某些编解码器受专利保护，因此 Chrome 可能无法使用某些编解码器。确保支持您的视频编解码器。
See also: http://news.cnet.com/8301-30685_3-20028196-264.html
另见：http: //news.cnet.com/8301-30685_3-20028196-264.html
Edit: I mean "protected" in that Google doesn't want to pay the fees to support the codec, not that Chrome couldn't handle that codec.
编辑：我的意思是“受保护”，因为 Google 不想支付支持编解码器的费用，而不是 Chrome 无法处理该编解码器。
