Chrome中的HTML5视频在mp4下不起作用
HTML5 Video in Chrome not working under mp4
我正在一个简单的网站上工作,在画布上显示视频。 视频显示,但它只是卡在第一帧,我设置了控件并且自动播放既不显示也不播放视频。
<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);
}
}当页面加载时,视频将显示在画布上并加载视频,但没有控件处于活动状态,也不会播放。
MP4 是一种媒体文件类型。 但是,MP4可以支持任意数量的不同编解码器。 某些编解码器受专利保护,因此 Chrome 可能无法使用某些编解码器。 确保支持视频的编解码器。
另请参阅:http://news.cnet.com/8301-30685_3-20028196-264.html
编辑:我的意思是"受保护",因为谷歌不想支付支持编解码器的费用,而不是Chrome无法处理该编解码器。
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- VideoJS:mp4在动态更改视频url时不起作用
- Chrome中的HTML5视频在mp4下不起作用