品牌网站建设制作,建筑工程网上报建流程,制作自己的网站学校,平台推广员在快节奏的数字时代#xff0c;视频已成为信息传播和内容消费的主要形式之一。场景嵌入技术作为一种创新媒介#xff0c;正在改变我们创作、分享和体验视频的方式。 场景嵌入视频的最大优势在于能够增强观众的沉浸感。通过融合现实环境与虚拟元素#xff0c;创作者可以突破传…在快节奏的数字时代视频已成为信息传播和内容消费的主要形式之一。场景嵌入技术作为一种创新媒介正在改变我们创作、分享和体验视频的方式。 场景嵌入视频的最大优势在于能够增强观众的沉浸感。通过融合现实环境与虚拟元素创作者可以突破传统视频制作的局限打造更加富有创意和吸引力的内容。这种沉浸式体验不仅吸引眼球更能够提高信息的传达效果。
接下来让我们一同探究在 HT 中怎样把视频嵌入场景下面会给出 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.imagenode.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 节点上导致节点内的内容无法显示。 在不断变化的数字媒体世界中场景嵌入视频代表着未来的发展趋势。图扑软件将积极把握这一趋势充分利用该方案持续打造突破性作品以丰富多元、高度定制的交互体验不断刷新用户对数字可视化内容的想象与期待。
