有没有被要求在画布上画一个mp4视频？有人知道怎么做吗？ [英] Been asked to draw an mp4 video on a canvas? Anyone know how to do this?
本文介绍了有没有被要求在画布上画一个mp4视频？有人知道怎么做吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否被要求在画布上绘制mp4视频？有人知道怎么做吗？
解决方案
这是一种在画布上绘制视频进行播放的方式，由oreilly.com提供
< html lang = en >
< head >
< meta charset = UTF-8 >
< title > CH6EX6：基本HTML5将视频加载到画布< / title >
< script src = modernizr-1.6.min.js > < / script >
< script 类型 = text / javascript > ;
window .addEventListener（' load'，eventWindowLoaded， false ）;
var videoElement;
var videoDiv;
function eventWindowLoaded（）{
videoElement = document .createElement （ video）;
videoDiv = document .createElement（' div ）;
document .body.appendChild（videoDiv）;
videoDiv.appendChild（videoElement）;
videoDiv.setAttribute（ style， display：none;）;
var videoType = supportedVideoFormat（videoElement）;
if （videoType == ）{
alert（ no video support）;
return ;
}
videoElement.setAttribute（ src， muirbeach。 + videoType）;
videoElement.addEventListener（ canplaythrough，videoLoaded，假）;
}
function supportedVideoFormat（video）{
var returnExtension = ;
if （video.canPlayType（ video） / webm）== 可能 ||
video.canPlayType （ video / webm）== 也许）{
returnExtension = WEBM;
} else if （video.canPlayType（ video / mp4）== 可能 ||
video.canPlayType（ video / mp4 ）== 也许）{
returnExtension = mp4;
} else if （video.canPlayType（ video / ogg）== 可能 ||
video.canPlayType（ video / ogg ）== 也许）{
returnExtension = ogg;
}
return returnExtension;
}
function canvasSupport（）{
返回 Modernizr.canvas;
}
function videoLoaded（event）{
canvasApp（）;
}
function canvasApp（）{
if （！canvasSupport（））{
return ;
}
function drawScreen（）{
// 背景
context.fillStyle = ' ＃ffffaa';
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（videoElement， 85 ， 30 ）;
}
var theCanvas = document 。 getElementById（ canvasOne）;
var context = theCanvas.getContext（ 2D）;
videoElement.play（）;
setInterval（drawScreen， 33 ）;
}
< / script >
< / meta > < / head >
< body >
< div style = position：absolute; top：50px; left：50px; >
< canvas id = canvasOne width = 500 height = 300 >
您的浏览器不支持HTML5画布。
< / canvas >
< / div >
< / body >
< / html >
Been asked to draw an mp4 video on a canvas? Anyone know how to do this?
解决方案
This is a way of drawing a video on a Canvas for playback, courtesy of oreilly.com
<html lang="en"> <head> <meta charset="UTF-8"> <title>CH6EX6: Basic HTML5 Load Video Onto The Canvas</title> <script src="modernizr-1.6.min.js"></script> <script type="text/javascript"> window.addEventListener('load', eventWindowLoaded, false); var videoElement; var videoDiv; function eventWindowLoaded() { videoElement = document.createElement("video"); videoDiv = document.createElement('div'); document.body.appendChild(videoDiv); videoDiv.appendChild(videoElement); videoDiv.setAttribute("style", "display:none;"); var videoType = supportedVideoFormat(videoElement); if (videoType == "") { alert("no video support"); return; } videoElement.setAttribute("src", "muirbeach." + videoType); videoElement.addEventListener("canplaythrough",videoLoaded,false); } function supportedVideoFormat(video) { var returnExtension = ""; if (video.canPlayType("video/webm") =="probably" || video.canPlayType("video/webm") == "maybe") { returnExtension = "webm"; } else if(video.canPlayType("video/mp4") == "probably" || video.canPlayType("video/mp4") == "maybe") { returnExtension = "mp4"; } 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 = '#ffffaa'; 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(videoElement , 85, 30); } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); videoElement.play(); setInterval(drawScreen, 33); } </script> </meta></head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="500" height="300"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>
这篇关于有没有被要求在画布上画一个mp4视频？有人知道怎么做吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
