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则是作为视频尚未加载成功时的一个占位图,可选。