如何使用 HTML5 在网页上制作互动视频？答案

【问题标题】：How to make interactive video on the webpage using HTML5?如何使用 HTML5 在网页上制作互动视频？
【发布时间】：2013-04-06 15:22:29
【问题描述】：

我有一个低延迟（本地）的网络服务器，我想做的是从网络服务器生成视频内容，并允许用户通过点击视频和点击 x,y 与该视频内容进行交互将转到服务器。

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

我尝试使用图像，每 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 和流数据到浏览器会有帮助吗？ ...

【问题讨论】：

标签： html video canvas html5-video

【解决方案1】：

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

从您的帖子中我不确定您是否已经拥有在画布中展示视频的代码。如果你需要知道如何在画布中显示视频，这里有一个教程：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>

【讨论】：