AceElf - 拙杰

EasyAR 微信小程序自动循环播放视频

使用 EasyAR 微信小程序的功能,实现扫描指定图片后自动跟踪识别图循环播放视频。EasyAR 在文档EasyAR 微信小程序 快速入门中提供了微信小程序的 demo,按照文档中的说明成功将 demo 运行了起来。

EasyAR 提供示例提供了扫描识别图加载 3D 模型和加载视频的示例,但在加载视频的功能中视频只会播放一次。我想要视频自动循环播放。

在 EasyAR 文档中没有找到相关说明,看了提供的 demo 代码发现它使用的微信小程序 xr-frame 的视频纹理实现的。

EasyAR 提供的 demo 中加载视频的代码在 /components/easyar-ar/easyar-ar.js 文件中的 loadVideo 方法中:

loadVideo: async function (targetId, setting) {
    ......         

    const v = await this.scene.assets.loadAsset({
        type: 'video-texture', assetId: targetId, src: setting.videoUrl,
        options: { autoPlay: true, abortAudio: false }
    });

    ......
}

其中 loadAsset 用的是微信小程序 xr-frame 的视频纹理实现的,在微信官方文档的视频纹理中有对 options 的说明,只需要在 options 中加入 loop: true 即可实现视频循环播放。

注意到视频纹理的几个选项,autoPlay开启后视频加载成功时会自动播放,loop开启时会循环播放,abortAudio用于指定是否要禁止声音(默认禁止),placeHolder则是作为视频尚未加载成功时的一个占位图,可选。

参考

EasyAR 微信小程序 快速入门

视频纹理


Copyright © 2023-2024 aceelf.com. All Rights Reserved.