在快節奏的數字時代，視頻已成為信息傳播和內容消費的主要形式之一。場景嵌入技術作為一種創新媒介，正在改變我們創作、分享和體驗視頻的方式。

效果展示

場景嵌入視頻的最大優勢在於能夠增強觀眾的沉浸感。通過融合現實環境與虛擬元素，創作者可以突破傳統視頻製作的侷限，打造更加富有創意和吸引力的內容。這種沉浸式體驗不僅吸引眼球，更能夠提高信息的傳達效果。

接下來，讓我們一同探究在 HT 中怎樣把視頻嵌入場景，下面會給出 2 種具體方案：

1. 使用視頻生成圖片進行切換。
2. 採用 ht-webview3d.js 插件的方式嵌入。

系統分析

生成視頻圖片

該方案無需依賴插件，主要通過將視頻的每一幀轉換為圖片，然後進行圖片切換的方式來達到呈現視頻的效果。只要是支持設置圖片的場景，都能夠實現視頻的播放，並且能營造出曲面屏等獨特的視覺效果。

利用 canvas 繪製圖片時，以下代碼中的 _memoryCtx 是與 canvas 相關的繪圖上下文。

function registerImage(width, height,node) {
    ht.Default.callLater(() => {
        node._memoryCtx.clearRect(0, 0, width, height);
        node._memoryCtx.drawImage(node._videoElement, 0, 0, width, height);
        g3d.invalidateData(node);
        registerImage(width, height,node);
    });
}

創建 video 元素用於播放視頻，同時創建 canvas 元素用於繪製註冊圖標，然後將繪製好的圖標設置到相應節點上進行展示。

function video3dPlay(url, width, height, node) {
    var video = document.createElement('video');
    video.setAttribute("id", "video");
    video.setAttribute("controls", "controls");
    video.muted = true;
    video.setAttribute('src', ht.Default.convertURL(url));
    var memoryCanvas = document.createElement('canvas');


    memoryCanvas.width = width;
    memoryCanvas.height = height;
    memoryCanvas.dynamic = true;


    ht.Default.setImage('video', memoryCanvas);


    node._memoryCtx = memoryCanvas.getContext('2d');
    node._videoElement = video;
    video.addEventListener('ended', function (e) {
         video.play();
    });
    video.play(); // 播放
    // video.load(); // 關閉
   // video.pause(); // 暫停


    registerImage(width, height,node);
    
    // 設置圖標至節點的 front.image
    node.s({
        'front.image': 'video'
    });
}

創建一個場景，並在該場景中添加用於播放視頻的節點。

var dm = new ht.DataModel();
var g3d = new ht.graph3d.Graph3dView(dm);
g3d.addToDOM();
//使用 shape 模擬曲面屏
var mpNode = new ht.Shape();
mpNode.s3([94, 257, 501]);
mpNode.setThickness(1)
mpNode.setPoints([{"x":706.5226394664013,"y":-249.7478365643907},{"x":706.5226394664013,"y":-249.7478365643907},{"x":800.9003901097786,"y":-110.60100560287732,},{"x":801.0888811155728,"y":14.704495929240132},{"x":801.277372121367,"y":140.0099974613576,},{"x":707.2766034895778,"y":251.4741695640791},{"x":707.2766034895778,"y":251.4741695640791}]);
mpNode.setSegments([1, 4, 4])
mpNode.s({
   "all.visible": false,
   "front.visible": true
})
dm.add(mpNode);


video3dPlay("assets/ht-video.mp4",mpNode.getLength(),mpNode.getTall(),mpNode);

WebView3d 插件嵌入

此方法依賴於 ht-webview3d.js 插件。需先引入 HT 軟件開發工具包（SDK），再引入該插件。通過使用 ht-webview3d.js 插件，能夠將 DOM 節點直接嵌入 3D 場景中，因此可以把 video 元素嵌入場景進行展示。

var dm = new ht.DataModel();
var g3d = new ht.graph3d.Graph3dView(dm);
g3d.addToDOM()


// 創建 WebView3d 節點，添加到 dm 中
var videoNode = new ht.WebView3d();
videoNode.s3([200, 200, 1]);
dm.add(videoNode);

ht.WebView3d 節點能夠直接嵌入鏈接，插件內部會生成 iframe 來嵌入鏈接所指向的內容，例如可直接嵌入視頻鏈接以展示視頻。

videoNode.attachDOM(ht.Default.convertURL("assets/ht-video2.mp4"), 200);

也可以在創建 video 的 DOM 節點後插入到相應的位置，方便對視頻的播放進行控制。

var video = document.createElement('video');
video.setAttribute("controls", "controls");
video.play();
video.addEventListener('ended', function (e) {
    video.play();
});
video.setAttribute('src',ht.Default.convertURL("assets/ht-video2.mp4"));
videoNode .attachDOM(video, 200)

使用此方法需要注意的是，ht-webview3d.js 插件插入視頻時是添加 DOM 元素的方式實現的。因此，當場景設置了背景顏色時，該背景顏色會覆蓋在 ht.WebView3d 生成的 DOM 節點上，導致節點內的內容無法顯示。

總結

在不斷變化的數字媒體世界中，場景嵌入視頻代表着未來的發展趨勢。圖撲軟件將積極把握這一趨勢，充分利用該方案，持續打造突破性作品，以豐富多元、高度定製的交互體驗，不斷刷新用户對數字可視化內容的想象與期待！

更多可視化案例：圖撲軟件 – 構建先進 2D 和 3D 可視化所需要的一切