如何通过HTML5将视频添加到3D立方体

时间:2013-02-02 22:54:54

标签: javascript html5 3d

我试图用带有视频的图像替换3D立方体以在每张脸上添加,我在尝试找出如何用html视频元素标签替换html标签时遇到问题。

我的jsfiddle可以在下面看到

http://jsfiddle.net/sean3200/W4pGa/

这是创建图像的代码的开头......

      function start3d(texture_image) {
       var screen_canvas = document.getElementById('canvas');

这是我的代码底部,其中正在加载图像

      var img = new Image();
      img.onload = function() { start3d(img); };
      img.src = 'http://content.bitsontherun.com/thumbs/3XnJSIm4-640.jpg';</script>

我知道如何通过html5创建和加载视频,但将它放在每个立方体上有点不同......任何有关这方面的帮助将不胜感激!感谢

1 个答案:

答案 0 :(得分:0)

将此代码放入div中

<object width="400" height="400"><param name="movie"    value="http://www.youtube.com/v/YLorLVa95Xo?fs=1&amp;hl=en_GB&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YLorLVa95Xo?fs=1&amp;hl=en_GB&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="400"></embed></object>

或者使用javascript在多维数据集类的第二个div上设置videeo,如果你在html体中有它:

$('.cube > div').eq(1).html('<object width="360" height="360"><param name="movie" value="http://www.youtube.com/v/YLorLVa95Xo?fs=1&amp;hl=en_GB&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YLorLVa95Xo?fs=1&amp;hl=en_GB&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360"></embed></object>');

它在chrome中工作正常,如果它在safari和firefox中有效,请回复。