<!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. C++ leetcode Longest Palindromic Substring

    明天就要上课了,再过几天又要见班主任汇报项目进程了,什么都没做的我竟然有一种迷之淡定,大概是想体验一波熬夜修仙的快乐了.不管怎么说,每天还是要水一篇博文,写一个LeetCode的题才圆满. 题目:Gi ...

  2. view的focusable属性改变设置是否可获取光标

    注意图中我画的箭头,当时鼠标点击的黑色圈圈的位置,然后按钮出现了按下的效果(黄色的描边) 刚开始看到这种效果很是好奇,不知道是怎么实现的,后来仔细一想,应该是整个啤酒罐是一张图片(ImageView) ...

  3. activity和fragment之前运行的生命周期

    1.activity生命周期 2.fragment的生命周期 3.对比图 4.测试代码 package com.goso.testapp; import android.app.Activity; i ...

  4. sql server中截取字符串的常用函数

    我们如果要在sql server中,使用截取字符串的方法要怎样使用呢? sql server提供了3个常用截取字符串方法,LEFT().RIGHT().SUBSTRING() /****** Sql ...

  5. corePoolSize和maxPoolSize的区别

    受限于硬件.内存和性能,我们不可能无限制的创建任意数量的线程,每一台机器允许的最大线程是一个有界值.因此ThreadPoolExecutor管理的线程数量是有界的.线程池就是用这些有限个数的线程,去执 ...

  6. 【HTTP】boundary 中一个 = 导致HTTP上传文件失败

    (1)#define ABOUNDARY "----=_Resume_002_0CE7_01D1C649.298A8070" (2)#define ABOUNDARY " ...

  7. VMware workstation 14 Pro下载、安装及激活码

    虚拟机安装 1.百度搜索VMware应用程序 2.功能介绍 3.下载完成 4.开始安装 双击应用程序开始安装 5.点击“下一步” 6.勾选“我接受” 选择“下一步” 7.安装文件的选择:1.默认安装路 ...

  8. Win10系列：UWP界面布局基础2

    属性设置 在面向对象程序开发中,所提及的属性通常指的是对象的属性.在XAML代码中,定义元素时也可以为其设置属性,例如对于一个TextBox元素,有背景属性.宽度属性和高度属性等.为了满足实际应用的需 ...

  9. java 一些容易忽视的小点-类和对象

    构造器 通过new关键字调用 构造器虽然有返回值,但是不能定义返回值类型(返回值的类型肯定是本类),不能在构造器里使用return返回某个值. 构造器是有权限的,也就是可以添加public,也可以添加 ...

  10. HashMap实现原理分析--面试详谈

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...