PixiJS — 视频纹理

最新推荐文章于 2024-07-02 09:19:07 发布

dabao87

最新推荐文章于 2024-07-02 09:19:07 发布

阅读量3k

点赞数 1

分类专栏： PIXI

原文链接：https://blog.csdn.net/FE_dev/article/details/86584974

版权

PIXI 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <style>
        button {
            display: inline-block;
            color: #fff;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            outline: none;
            padding: 10px 20px;
            margin-bottom: 10px;
        }

        button:hover {
            color: #ddd;
        }

        #play {
            background-color: #ff0081;
            box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
        }

        #pause {
            background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
            margin-left: 20px;
            box-shadow: 0 2px 25px rgba(22, 217, 227, 0.5);
        }
    </style>
</head>

<body>
    <button id="play">播放</button>
    <button id="pause">暂停</button>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 426,
            height: 240,
            transparent: true,
        }
        let displayResolution = window.devicePixelRatio;
        console.log(displayResolution)
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取舞台
        let stage = app.stage;
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);

        //需要加载的图片的地址
        let videoUrl = "https://www.kkkk1000.com/lemall/media/123.mp4";
        //视频纹理
        let videoTexture;
        //需要用到的精灵 
        let videoSprite;
        //视频元素
        let videoSource;

        //加载视频纹理
        videoTexture = PIXI.Texture.fromVideo(videoUrl);
        //创建视频精灵
        videoSprite = new PIXI.Sprite(videoTexture);
        //设置视频精灵的宽度和高度
        videoSprite.width = option.width;
        videoSprite.height = option.height;
        //视频元素
        videoSource = videoTexture.baseTexture.source;

        //把视频精灵添加到舞台上
        stage.addChild(videoSprite);

        let pixiBtn = document.getElementById("play");
        let pauseBtn = document.getElementById("pause");

        pixiBtn.addEventListener("click", function () {
            videoSource.play();
        });
        pauseBtn.addEventListener("click", function () {
            videoSource.pause()
        });

    </script>
</body>

</html>

参考：https://blog.csdn.net/FE_dev/article/details/86584974

dabao87

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PixiJS — 视频纹理

<!doctype html><html lang="zn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab...
复制链接

扫一扫

专栏目录