<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>fz-live</title>

  <link href="./css/video.css" rel="stylesheet">

  <script src="./js/video.js"></script>

  <script src="./js/videojs-live.js"></script>

  <script src="./js/three.min.js"></script>

</head>

<body>

  <video id="my_video_1" autoplay=true class="video-js vjs-default-skin"  preload="auto" width="300" height="200"

  data-setup='{}'>

    <source src="./src/z.m3u8" type="application/x-mpegURL">

  </video>

  <script>

            var scene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();

            renderer.setSize( 400, 400);

            document.body.appendChild( renderer.domElement );

            var geometry = new THREE.PlaneGeometry( 10, 10 );

            var video = document.getElementById( 'my_video_1' );

            var texture = new THREE.VideoTexture( video );

            texture.minFilter = THREE.LinearFilter;

            texture.magFilter = THREE.LinearFilter;

            texture.format = THREE.RGBFormat;

            var material =  new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture,  side: THREE.DoubleSide } );

            var plane = new THREE.Mesh( geometry, material );

            scene.add( plane );

            camera.position.z = 10;

            var animate = function () {

                requestAnimationFrame( animate );

                renderer.render(scene, camera);

            };

            animate();

  </script>

</body>

</html>

效果：

引用资源：

https://github.com/huangyaoxin/hLive

https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene

https://threejs.org/docs/index.html#api/geometries/PlaneGeometry

m3u8编码视频webgl、threejs渲染视频纹理demo的更多相关文章

  1. WPF 视频硬解码渲染播放（无空域）（支持4K、8K、高帧率视频）

    MediaWPF 基于 .NET 6 实现视频硬解码渲染Demo(无空域问题) 代码实现仅供学习参考 本项目视频渲染通过显卡进行视频解码,CPU几乎不参与工作,并且不存在令人烦躁的空域问题. 在播放摄 ...

  2. Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能

    视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpe ...

  3. Android中直播视频技术探究之---视频直播服务端环境搭建(Nginx+RTMP)

    一.前言 前面介绍了Android中视频直播中的一个重要类ByteBuffer,不了解的同学可以 点击查看 到这里开始,我们开始动手开发了,因为我们后续肯定是需要直播视频功能,然后把视频推流到服务端, ...

  4. NeHe OpenGL教程 第三十六课：从渲染到纹理

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. 使用ffmpeg 对视频截图，和视频转换格式

    //执行CMD命令方法 public static void CmdProcess(string command)//调用CMD        {            //实例化一个进程类      ...

  6. Java Web 中使用ffmpeg实现视频转码、视频截图

    Java Web 中使用ffmpeg实现视频转码.视频截图 转载自:[ http://www.cnblogs.com/dennisit/archive/2013/02/16/2913287.html  ...

  7. Opencv保存摄像头视频&&各种编码器下视频文件占用空间对比

    打开视频文件或摄像头视频需要使用Opencv中的VideoCapture类,保存视频或摄像头视频到本地磁盘,需要使用Opencv中的VideoWriter类,使用都很简单,这篇文章就记录一下Video ...

  8. Java实现视频网站的视频上传、视频转码、及视频播放功能(ffmpeg)

    视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpe ...

  9. 工具---《.264视频 转成 MP4视频》

    <.264视频 转成 MP4视频> 安装了“爱奇艺万能播放器”可以打开.264视频,但是opencv却不能直接读取.264视频,还是需要想办法“.264视频 转成 MP4/avi视频”. ...

随机推荐

  1. nodejs--路径问题

    在读写模块中,需要引入读写文件,此时需要注意路径问题.Node.js中为我们提供了两个参数:__dirname和__filename. __dirname:全局变量,存储的是文件所在的文件目录 __f ...

  2. py-faster R-CNN 用于训练自己的数据（1）

    官方给出的faster R-CNN的源码python版:https://github.com/rbgirshick/py-faster-rcnn 先来分析一下 整个文件,根目录下的文件 caffe-f ...

  3. centos7安装nginx 报./configure: error: C compiler cc is not found

    CentOS 7 下 安装 nginx 执行配置命令 ./configure 时提示以下错误: 解决: 执行以下命令: yum -y install gcc gcc-c++ autoconf auto ...

  4. Oracle12c CDB架构图

  5. 微信小程序 无限加载 上拉加载更多

    加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下: demo.js // pages/project/project.js const app = g ...

  6. matlab作图 latex插图

    推荐用saveas eps,再用eps2pdf转成pdf.这样可以之间pdflatex编译. if result.savepic saveas(gcf,[ pwd '/picture/right_' ...

  7. LY.JAVA.DAY12.String类

    2018-07-24 14:06:03 String类概述 字符串是由多个字符组成一串数据(字符序列) 字符串可以看成字符数组 一旦被赋值就不能被改变    值不能变 1.过程概述: 方法区---字符 ...

  8. do_bootrk

    1. LMB (logical memory blocks) lmb为uboot下的一种内存管理机制,用于管理镜像的内存.lmb所记录的内存信息最终会传递给kernel.在/include/lmb.h ...

  9. learning ddr reset initialization with stable power

  10. unity中鼠标按下加速漫游，鼠标抬起减速漫游。

    private bool IsMouseUpOrDown=true; //一开始默认是鼠标抬起状态 if (Input.GetMouseButtonDown(1)) //鼠标按下的瞬间状态 { IsM ...