用html5做一个视频网页,如何使用HTML5在网页上制作交互式视频？

您可以创建点倾斜相机的错觉这样

我是不是从你的职位肯定，如果你已经有代码在画布上呈现视频。如果您需要了解如何在画布上显示视频，请参阅以下教程：http://html5doctor.com/video-canvas-magic/

之后，假设您有一个屏幕外图像(或视频)，其来源为640x480，较小的画布为320x240。

显示在画布该图像的较小部分。

// grab a smaller part of the source and display it in the canvas

context.drawImage(source,X,Y,source.width,source.height,0,0,canvas.width,canvas.height);

然后，当用户点击，只需调整你显示它们的源的部分

// change the portion of the source you’re displaying

if(mouseX0){ x-=10; }

if(mouseX>=canvas.width/2 && x

if(mouseY0){ y-=10; }

if(mouseY>=canvas.height/2 && y

body{ background-color: ivory; }

canvas{border:1px solid red;}

$(function(){

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var canvasOffset=$("#canvas").offset();

var offsetX=canvasOffset.left;

var offsetY=canvasOffset.top;

var img=new Image();

img.οnlοad=function(){

draw();

}

img.src="http://dsmy2muqb7t4m.cloudfront.net/tuts/218_Trace_Face/10B.jpg";

var x=200;

var y=200;

function draw(){

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.drawImage(img,x,y,canvas.width,canvas.height,0,0,canvas.width,canvas.height);

}

function handleMouseDown(e){

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

// Put your mousedown stuff here

if(mouseX0){ x-=10; }

if(mouseX>=canvas.width/2 && x

if(mouseY0){ y-=10; }

if(mouseY>=canvas.height/2 && y

draw();

}

$("#canvas").mousedown(function(e){handleMouseDown(e);});

}); // end $(function(){});

Click in the image to reveal in the direction of the click