Threejs + Videojs/原生video/第三方播放器实现全景视频/全景直播播放DEMO_three video-程序员宅基地

图片如果侵权请告知，立刻删除！
在这里插入图片描述

原理

原理其实很简单，做过全景图的同学都知道，球模型+全景图片贴图。全景视频/全景直播就是球模型+全景视频素材。
至于播放器样式，可以自己用Js+Dom自定义，或者更改videojs（别的播放器插件也行）的样式即便你是用原生video也是可行的 threejs官方demo就是原生video标签。
本demo就是拿着threejs的demo改的
demo中videojs生成的全屏按钮点击的时候只会全屏videojs的dom 全景视频/直播是渲染在canvas上的，如果有全屏的需求，要改写这里的逻辑，让它全屏body（或者让video和canvas在一个盒子中，全屏这个盒子）隐藏不需要的部分，或者全屏canvas，但是全屏canvas就要你把控制条部分重写了，不然全屏的没控制条
移动端的时候将mousedown、mousemove、mouseup改成对应的touch事件就好了，video设置成x5-playsinline="“playsinline=”“webkit-playsinline=”" 避免全屏播放导致canvas无法渲染video
如果使用videojs，canvas的绘制要在视频加载完之后，监听videojs的可播放事件（不了解videojs的api 没测试好不太确定）或者使用原生video标签
测试QQ 微信内置浏览器可行，UC内置不可使用该方法渲染 UC的video看着像新开一层webview播放的导致自己页面上的video实际并没有播放看着像不确定

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - equirectangular video panorama</title>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
        />
        <style>
            body {
     
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
     
                position: absolute;
                top: 0px;
                width: 100%;
                color: #ffffff;
                padding: 5px;
                font-family: Monospace;
                font-size: 13px;
                font-weight: bold;
                text-align: center;
            }

            a {
     
                color: #ffffff;
            }
            #my-video {
     
                position: fixed;
                z-index: 99999;
                top: 0;
                left: 0;
            }
        </style>
        <link
            href="https://vjs.zencdn.net/7.5.4/video-js.css"
            rel="stylesheet"
        />
    </head>
    <body>
        <div id="container"></div>
        <!-- 可以通过样式把video的控制层放到你想放的位置  或者 通过js自己去写一些控制方法 -->
        <video
            id="my-video"
            class="video-js"
            controls
            preload="auto"
            autoplay
            width="640"
            loop
            height="264"
            poster="MY_VIDEO_POSTER.jpg"
            data-setup="{}"
            crossorigin="anonymous"
        >
        <!-- 直播源是网友提供的 如有侵权 麻烦告知 这就删除  如果播放视频 把这里换成全景视频的链接就行了 -->
            <source
                src="http://i3.vzan.cc/clip/85191/1038133875/E97998EBA355633F.m3u8"
            />
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider
                upgrading to a web browser that
                <a
                    href="https://videojs.com/html5-video-support/"
                    target="_blank"
                    >supports HTML5 video</a
                >
            </p>
        </video>
        <script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
        <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>

        <script>
            // videojs('#my-video', {
     
            //     controls: true,
            //     autoplay: true,
            //     preload: 'auto'
            // })
            var camera, scene, renderer

            var isUserInteracting = false,
                lon = 0,
                lat = 0,
                phi = 0,
                theta = 0,
                distance = 50,
                onPointerDownPointerX = 0,
                onPointerDownPointerY = 0,
                onPointerDownLon = 0,
                onPointerDownLat = 0

            init()
            animate()

            function init() {
     
                var container, mesh

                container = document.getElementById('container')

                camera = new THREE.PerspectiveCamera(
                    75,
                    window.innerWidth / window.innerHeight,
                    1,
                    1100
                )
                camera.target = new THREE.Vector3(0, 0, 0)

                scene = new THREE.Scene()

                var geometry = new THREE.SphereBufferGeometry(500, 60, 40)
                // invert the geometry on the x-axis so that all of the faces point inward
                geometry.scale(-1, 1, 1)

                // var video = document.createElement('video')
                // video.crossOrigin = '*'
                // video.width = 640
                // video.height = 360
                // video.loop = true
                // video.muted = true
                // video.src =
                //     'http://223.110.242.130:6610/gitv/live1/G_CCTV-1-HQ/1.m3u8'
                // video.setAttribute('webkit-playsinline', 'webkit-playsinline')
                // video.play()

                var texture = new THREE.VideoTexture(
                    document.querySelector('#my-video')
                )
                var material = new THREE.MeshBasicMaterial({
      map: texture })

                mesh = new THREE.Mesh(geometry, material)

                scene.add(mesh)

                renderer = new THREE.WebGLRenderer()
                renderer.setPixelRatio(window.devicePixelRatio)
                renderer.setSize(window.innerWidth, window.innerHeight)
                container.appendChild(renderer.domElement)

                document.addEventListener(
                    'mousedown',
                    onDocumentMouseDown,
                    false
                )
                document.addEventListener(
                    'mousemove',
                    onDocumentMouseMove,
                    false
                )
                document.addEventListener('mouseup', onDocumentMouseUp, false)
                document.addEventListener('wheel', onDocumentMouseWheel, false)

                //

                window.addEventListener('resize', onWindowResize, false)
            }

            function onWindowResize() {
     
                camera.aspect = window.innerWidth / window.innerHeight
                camera.updateProjectionMatrix()

                renderer.setSize(window.innerWidth, window.innerHeight)
            }

            function onDocumentMouseDown(event) {
     
                event.preventDefault()

                isUserInteracting = true

                onPointerDownPointerX = event.clientX
                onPointerDownPointerY = event.clientY

                onPointerDownLon = lon
                onPointerDownLat = lat
            }

            function onDocumentMouseMove(event) {
     
                if (isUserInteracting === true) {
     
                    lon =
                        (onPointerDownPointerX - event.clientX) * 0.1 +
                        onPointerDownLon
                    lat =
                        (event.clientY - onPointerDownPointerY) * 0.1 +
                        onPointerDownLat
                }
            }

            function onDocumentMouseUp() {
     
                isUserInteracting = false
            }

            function onDocumentMouseWheel(event) {
     
                distance += event.deltaY * 0.05

                distance = THREE.Math.clamp(distance, 1, 50)
            }

            function animate() {
     
                requestAnimationFrame(animate)
                update()
            }

            function update() {
     
                lat = Math.max(-85, Math.min(85, lat))
                phi = THREE.Math.degToRad(90 - lat)
                theta = THREE.Math.degToRad(lon)

                camera.position.x = distance * Math.sin(phi) * Math.cos(theta)
                camera.position.y = distance * Math.cos(phi)
                camera.position.z = distance * Math.sin(phi) * Math.sin(theta)

                camera.lookAt(camera.target)

                renderer.render(scene, camera)
            }
        </script>
    </body>
</html>

本文链接：https://blog.csdn.net/qq_37540004/article/details/90750529

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

class和struct的区别-程序员宅基地

文章浏览阅读101次。4.class可以有⽆参的构造函数，struct不可以，必须是有参的构造函数，⽽且在有参的构造函数必须初始。2.Struct适⽤于作为经常使⽤的⼀些数据组合成的新类型，表示诸如点、矩形等主要⽤来存储数据的轻量。1.Class⽐较适合⼤的和复杂的数据，表现抽象和多级别的对象层次时。2.class允许继承、被继承，struct不允许，只能继承接⼝。3.Struct有性能优势，Class有⾯向对象的扩展优势。3.class可以初始化变量，struct不可以。1.class是引⽤类型，struct是值类型。

android使用json后闪退,应用闪退问题：从json信息的解析开始就会闪退-程序员宅基地

文章浏览阅读586次。想实现的功能是点击顶部按钮之后按关键字进行搜索，已经可以从服务器收到反馈的json信息，但从json信息的解析开始就会闪退，加载listview也不知道行不行public abstract class loadlistview{public ListView plv;public String js;public int listlength;public int listvisit;public..._rton转json为什么会闪退

如何使用wordnet词典，得到英文句子的同义句_get_synonyms wordnet-程序员宅基地

文章浏览阅读219次。如何使用wordnet词典，得到英文句子的同义句_get_synonyms wordnet

系统项目报表导出功能开发_积木报表多线程-程序员宅基地

文章浏览阅读521次。系统项目报表导出导出任务队列表 + 定时扫描 + 多线程_积木报表多线程

ajax 如何从服务器上获取数据？_ajax 获取http数据-程序员宅基地

文章浏览阅读1.1k次，点赞9次，收藏9次。使用AJAX技术的好处之一是它能够提供更好的用户体验，因为它允许在不重新加载整个页面的情况下更新网页的某一部分。另外，AJAX还使得开发人员能够创建更复杂、更动态的Web应用程序，因为它们可以在后台与服务器进行通信，而不需要打断用户的浏览体验。在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种常用的技术，用于在不重新加载整个页面的情况下，从服务器获取数据并更新网页的某一部分。使用AJAX，你可以创建异步请求，从而提供更快的响应和更好的用户体验。_ajax 获取http数据

Linux图形终端与字符终端-程序员宅基地

文章浏览阅读2.8k次。登录退出、修改密码、关机重启_字符终端

随便推点

Python与Arduino绘制超声波雷达扫描_超声波扫描建模 python库-程序员宅基地

文章浏览阅读3.8k次，点赞3次，收藏51次。前段时间看到一位发烧友制作的超声波雷达扫描神器，用到了Arduino和Processing，可惜啊，我不会Processing更看不懂人家的程序，咋办呢？嘿嘿，所以我就换了个思路解决，因为我会一点Python啊，那就动手吧！在做这个案例之前先要搞明白一个问题：怎么将Arduino通过超声波检测到的距离反馈到Python端？这个嘛，我首先想到了串行通信接口。没错！就是串口。只要Arduino将数据发送给COM口，然后Python能从COM口读取到这个数据就可以啦！我先写了一个测试程序试了一下，OK！搞定_超声波扫描建模 python库

凯撒加密方法介绍及实例说明-程序员宅基地

文章浏览阅读4.2k次。端—端加密指信息由发送端自动加密，并且由TCP/IP进行数据包封装，然后作为不可阅读和不可识别的数据穿过互联网，当这些信息到达目的地，将被自动重组、解密，而成为可读的数据。不可逆加密算法的特征是加密过程中不需要使用密钥，输入明文后由系统直接经过加密算法处理成密文，这种加密后的数据是无法被解密的，只有重新输入明文，并再次经过同样不可逆的加密算法处理，得到相同的加密密文并被系统重新识别后，才能真正解密。2．使用时，加密者查找明文字母表中需要加密的消息中的每一个字母所在位置，并且写下密文字母表中对应的字母。_凯撒加密

工控协议--cip--协议解析基本记录_cip协议embedded_service_error-程序员宅基地

文章浏览阅读5.7k次。CIP报文解析常用到的几个字段：普通类型服务类型:[0x00], CIP对象:[0x02 Message Router], ioi segments:[XX]PCCC（带cmd和func）服务类型:[0x00], CIP对象:[0x02 Message Router], cmd:[0x101], fnc:[0x101]..._cip协议embedded_service_error

如何在vs2019及以后版本(如vs2022)上添加添加ActiveX控件中的MFC类_vs添加mfc库-程序员宅基地

文章浏览阅读2.4k次，点赞9次，收藏13次。有时候我们在MFC项目开发过程中，需要用到一些微软已经提供的功能，如VC++使用EXCEL功能，这时候我们就能直接通过VS2019到如EXCEL.EXE方式，生成对应的OLE头文件，然后直接使用功能，那么，我们上篇文章中介绍了vs2017及以前的版本如何来添加。但由于微软某些方面考虑，这种方式已被放弃。从上图中可以看出，这一功能，在从vs2017版本15.9开始，后续版本已经删除了此功能。那么我们如果仍需要此功能，我们如何在新版本中添加呢。_vs添加mfc库

frame_size (1536) was not respected for a non-last frame_frame_size (1024) was not respected for a non-last-程序员宅基地

文章浏览阅读785次。用ac3编码，执行编码函数时报错入如下：[ac3 @ 0x7fed7800f200] frame_size (1536) was not respected for anon-last frame (avcodec_encode_audio2)用ac3编码时每次送入编码器的音频采样数应该是1536个采样，不然就会报上述错误。这个数字并非刻意固定，而是跟ac3内部的编码算法原理相关。全网找不到，国内音视频之路还有很长的路，音视频人一起加油吧～......_frame_size (1024) was not respected for a non-last frame

Android移动应用开发入门_在安卓移动应用开发中要在活动类文件中声迷你一个复选框变量-程序员宅基地

文章浏览阅读230次，点赞2次，收藏2次。创建Android应用程序一个项目里面可以有很多模块，而每一个模块就对应了一个应用程序。项目结构介绍_在安卓移动应用开发中要在活动类文件中声迷你一个复选框变量