<!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. 杂记-格式化Date默认格式,日期加一天,jstl判断字符类型,ajax模拟from表单后台跳转页面,jstl访问数据库并在页面显示

    1.格式化Date默认格式 String str="Sun Oct 08 22:36:45 CST 2017"; SimpleDateFormat sdf = new Simple ...

  2. [LightOJ 1027] A Dangerous Maze

    A Dangerous Maze You are in a maze; seeing n doors in front of you in beginning. You can choose any ...

  3. TOR的十个最好的替代工具

    TOR的十个最好的替代工具: 一.Comodo Dragon(基于Chromium) TOR基于Firefox,因为我们换个口味,首先推荐一个基于开源项目Chromium的Comodo Dragon, ...

  4. 操作系统IIS安装

    IIS在不同的操作系统的安装稍有些差异,如: 1.Windows XP 快捷安装IIS的话,推荐使用IIS一键安装程序包.或者找响应文件包i386,安装所需文件 2.Windows 7 安装IIS,则 ...

  5. MFC消息-自定义消息

    转:http://blog.csdn.net/penpenandtongtong/article/details/18598907 像MFC的窗口发送消息,可以进行自定义的动作行为,因此很多时候非常有 ...

  6. xubuntu无法进图形界面问题

    http://www.ubuntugeek.com/fix-for-cant-login-after-upgrading-from-ubuntu-13-04-to-ubuntu-13-10.html ...

  7. nyoj-0613-免费馅饼(dp)

    nyoj-0613-免费馅饼 G. 免费馅饼 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在 ...

  8. Win10系列：WinJS库控件

    在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...

  9. Java 实现倒计时（由秒计算天、小时、分钟、秒）

    public class Countdown4 { private static long day = 0; private static long hour = 0; private static ...

  10. js小游戏：五子棋

    使用纯js的小游戏,五子棋 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...