如何使用HTML5在网页上制作交互式视频？

我有一个低延迟（本地）的Web服务器，我想要做的是从Web服务器生成视频内容，并允许用户通过点击视频和点击x，y将与该视频内容交互去服务器。如何使用HTML5在网页上制作交互式视频？

用户点击的位置将决定视频的功能。此外，视频不会暂停等待点击，它需要继续播放。

我尝试使用图像，每50毫秒重新加载一个图像。在我的MAC上，Chrome浏览器使用大约10％的CPU使用率来每50毫秒重新载入一张图片，其中图片以PHP生成。那很好，百分之十是好的，但我想有更好的方法吗？

后来我也需要能够发送用户点击的XY坐标，以及我可以通过URL来完成。

<script type="text/javascript"> 

function reloadIt() { 
    var n = Math.floor(Math.random()*1000001); 
    $("#topaz").attr("src", "image.php?n=" + n); 
    setTimeout(reloadIt, 50); 
} 

$(document).ready(function() { 
    // Handler for .ready() called. 
    setTimeout(reloadIt, 50); 
}); 

    </script>

你能想到这个问题的另一种方式是，你怎么能编写一个网络摄像头客户端，用户可以控制摄像机？你如何用HTML5做到这一点？（而不是Flash），这样当用户点击时，摄像机会向上移动，视频会变为向上移动。

会有什么办法在HTML5中做这样的视频流吗？将Canva和流数据用于浏览器有帮助吗？ ...

来源

2013-04-06 Phil

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

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

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

<img width=640 height=480> 
<canvas width=320 height=480>

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

// 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(mouseX<canvas.width/2 && x>0){ x-=10; } 
if(mouseX>=canvas.width/2 && x<canvas.width){ x+=10; } 
if(mouseY<canvas.height/2 && y>0){ y-=10; } 
if(mouseY>=canvas.height/2 && y<canvas.height){ y+=10; }

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/3KYC5/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(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.onload=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(mouseX<canvas.width/2 && x>0){ x-=10; } 
     if(mouseX>=canvas.width/2 && x<canvas.width){ x+=10; } 
     if(mouseY<canvas.height/2 && y>0){ y-=10; } 
     if(mouseY>=canvas.height/2 && y<canvas.height){ y+=10; } 
     draw(); 
    } 

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

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Click in the image to reveal in the direction of the click</p> 
    <canvas id="canvas" width=320 height=240></canvas> 
</body> 
</html>

来源

2013-04-06 16:31:16 markE

如何使用HTML5在网页上制作交互式视频？

回答

相关问题