[HTML5]将WebView的视频绘制在Canvas上

想做这样一个技术流程：将视频用WebView播放，然后渲染到Canvas上；通过Java的SurfaceView去得到textureid；然后提供给Unity使用。

如何把WebView的视频渲染到Canvas上呢，这里提供了一个h5的代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
var videoElement;
var videoDiv;
function eventWindowLoaded() 
{
   videoElement = document.getElementById("video");
   videoElement.addEventListener("canplaythrough",videoLoaded,false);
}

function videoLoaded(event) 
{
   canvasApp();
}

function canvasApp() 
{ 
 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 , 0, 0);
   }

   var theCanvas = document.getElementById("canvasOne");
   var context = theCanvas.getContext("2d");
   videoElement.play();

   function gameLoop() 
   {
      window.setTimeout(gameLoop, 20);
      drawScreen();
   }

   gameLoop();
}

</script>
</head>
<body>
<video id="video" src="http://182.247.240.45/videos/v0/20160519/81/2d/c9b69e42d6a971d80813c800b93367e5.mp4?key=04acb5311464991f6f767d5ca41e966b&dis_k=06e9106d4ee45ed7cd7a22f259b2b125e&dis_t=1497423875&dis_dz=CT-SiChuan_ChengDu&dis_st=44&src=iqiyi.com&uuid=a0a0d9f-5940e003-9b&m=v&qd_vip=0&qd_p=b68bb620&qd_tm=1497423875106&qdv=1&ip=182.139.182.32&qd_src=02020031010000000000&dis_src=vrs&qd_uid=0&qd_k=114331f85815b38be547c19170f8ebb3&qd_ip=b68bb620&qypid=485218900_31"></video>
<canvas id="canvasOne" width="480" height="272" styles = "display:overflow">
 Your browser does not support HTML5 Canvas.
</canvas>
</body>
</html>

这个Video的源，一定要是视频源本身的地址。

这里的例子是我解析的iqiyi的一个视频，所以你在使用的时候token一定过期了，视频就放不起，这里我小声讲一下怎么得到这个源地址的。

1，在iqiyi开放开台，找得一个例子：http://open.iqiyi.com/lib/player.html

就是 “<iframe src='http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=77a4ba9809e102a2148796a15c4d964c&tvId=485218900&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%' frameborder='0' width='100%' height='100%' allowfullscreen='true'></iframe>”

2，在浏览器打开源码，看到一个组成url的函数，根据这个方法实现组成一个新的地址。

3，用这个新的地址，查看源码，看下面图选中的部分，就是视频源的地址了，就是那个以ip开始的Video播放地址。

这种方法不能用于正常开发，只作为技术交流用哈。

[HTML5]将WebView的视频绘制在Canvas上

猜你喜欢