<!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. Slony-I同步复制部署

    本次测试环境 IP 10.189.102.118 10.189.100.195 10.189.100.226 PGHOME /usr/local/pgsql /usr/local/pgsql /usr ...

  2. Lunx下 怎样启动和关闭oracle数据库

    1.因为oracle运行在Linux系统下,首先,要连接Linux系统 2.切换到oracle安装用户下. 我的是 ora12. 3.运行oracle的环境变量, 以便输入相关命令. 4.进入orac ...

  3. noip2014无线网络发射器选址

    题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的 129 条东西向街道和 129 条南北向街道所形成的网格状,并且 ...

  4. vul/0day/shellcode/payload/poc/exp

    vul--泛指漏洞 0day--未公开或虽已公开但还没有修复方法的漏洞 shellcode--远程溢出后执行的那段代码 payload--攻击载荷,送到远端机器执行的整段代码 poc--Proof o ...

  5. mysql如何让自增id从某个位置开始设置方法

    一般情况下两种方式: 1.本地数据不需要的情况下直接情况表(尽量不使用

  6. ueditor自定义额外参数

    <script>ue.ready(function () { ue.setContent('123456');//设置富文本编辑器初始化数据 ue.execCommand('serverp ...

  7. NOI2019冬令营报到通知

    由中国计算机学会(CCF)主办的2019全国青少年信息学奥林匹克冬令营(CCF NOI 2019冬令营)将于2019年1月24日-31日在广州市第二中学举行.其中1月24日为报到日,1月31日为疏散日 ...

  8. python全栈开发笔记-----------概要

    Python开发 开发: 开发语言: 高级语言:python.Java.php  .C#   .Go .ruby . C++ .... ===>字节码 低级语言:C.汇编            ...

  9. HTML(五)选择器--伪类选择器

    HTML代码 <body> <a href="www.baidu.com">www.baidu.com</a> </body> CS ...

  10. RabbitMQ 队列、消息持久化

    RabbitMQ的消息队列的持久化是一个很不错的功能,设置也非常简单.如下代码: 1.设置队列持久化(在声明队列的时候设置) channel.QueueDeclare(queue: "q.l ...