web端实现ios实况图预览 livephoto

LivePhotosKit JS 实现实况图预览

官网:https://developer.apple.com/documentation/livephotoskitjs
示例：https://developer.apple.com/live-photos/

1.html

<template><div class="box"><!-- 图片 --><div id="myExistingElement"></div></div>
</template>

2.css

// 图片盒子（必须是一个有宽高的盒子）
#myExistingElement {width: 90%;height: 90%;
}
// 给图片的盒子 添加阴影（实现图片浮起来的效果）
.lpk-live-photo-renderer {box-shadow:0px 20px 40px rgba(0, 0, 0, 0.4);-webkit-box-shadow:0px 20px 40px rgba(0, 0, 0, 0.4);-moz-box-shadow:0px 20px 40px rgba(0, 0, 0, 0.4);
}

3.js

methods: {const player = this.$LivePhotosKit.Player(document.getElementById('myExistingElement'));player.photoSrc = '/https://iosdata16.s3.us-west-1.amazonaws.com/waves.JPG'player.videoSrc =  '/https://iosdata16.s3.us-west-1.amazonaws.com/waves.mov'// 当玩家获得刚够视频帧，并获得足够迅速流畅播放player.addEventListener('canplay', (ev) => {console.log(ev, '成功');});// 加载 Live Photo 的照片或视频组件失败时player.addEventListener('error', (ev) => {if (typeof ev.detail.errorCode === 'number') {switch (ev.detail.errorCode) {case this.$LivePhotosKit.Errors.PHOTO_FAILED_TO_LOAD:// Do something  图片组件加载失败break;case this.$LivePhotosKit.Errors.VIDEO_FAILED_TO_LOAD:// Do something  视频组件加载失败break;}} else {// Extract error.console.error(ev.detail.error);}})// Live照片的回放已经完成player.addEventListener('ended', (ev) => {console.log(ev, '完成');});// player.playbackStyle = this.$LivePhotosKit.PlaybackStyle.HINT;// player.playbackStyle = this.$LivePhotosKit.PlaybackStyle.FULL;// player.play();// player.pause();// player.toggle();// player.stop();// // // Seek the animation to one quarter through.// player.currentTime = 0.25 * player.duration;// // // Seek the animation to 0.1 seconds into the Live Photo.// player.currentTime = 0.1;
}

总结：livephoto 解析过后是一个HEIC格式的图片+MOV格式的视频（编码为265的HEVC格式），视频需要解码成为编码为264的MP4格式，HEIC格式的图片需要转为JPG格式的图片

web端实现ios实况图预览 livephoto相关推荐

Vue 移动端 previewer实现图片放大预览
简述本文主要讲述,vue在手机移动端如何实现对小图进行放大查看预览.类似于朋友圈的照片查看. 可用工具 1.npm安装,npm i vue-preview -S 2.使用一些Vue的UI组件框架自带 ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案
关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案参考文章: (1)关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案 (2)https://www.cnblog ...
vue h5端实现富文本图片预览（基于 Vant 的 ImagePreview 组件）
h5 页⾯展⽰从后台接受的富⽂本信息(图⽚预览) vant main.js引入 import{ImagePreview}from'vant'; Vue.use(ImagePreview); Vue.p ...
5款支持Web端创作的脑图工具，学习一款就够了
为了追求便利性,很多人都不想下载客户端,但是支持Web端操作的思维导图软件不多,今天就给大家整理了几款支持在Web端进行创作的脑图工具. 亿图脑图作为一款办公学习效率软件,亿图脑图能适用的平台还是比 ...
Web端CAD图形找不同？一键在Web端找出CAD图不同并对比分析
引言在实际中,当多专业设计协助时,遇到图纸更新后,要对比图纸找出图纸的不同处,一直是一个比较耗时费力的事情,也是业内的一大痛点.一般CAD新旧图纸的内容对比,包括增加新的图形元素.减少原有的图形元素 ...
iOS 两种预览使用详解（配Demo下载）（ Quicklook UIDocumentInteractionController）
文章目录二. 使用 1. 首先,引入框架 2. 将QLPreviewController设置为属性 3. 初始化 4. 设置代理和数据源 5. 编码问题个人小结 QLPreviewControll ...
html自动播放片头预览,AE脚本-创建html网页GIF动图预览批量输出GIF动图工具脚本aw_PreviewGenerator v1.6...
[脚本要求] 文件大小:5.80 MB 脚本语言:英文脚本版本:v1.6 脚本兼容:支持 AE CS4-CC 2015 Win/Mac 使用帮助:PDF [脚本介绍] aw_PreviewGener ...

web端实现ios实况图预览 livephoto

LivePhotosKit JS 实现实况图预览

web端实现ios实况图预览 livephoto相关推荐

最新文章

热门文章

web端 实现ios实况图 预览 livephoto

LivePhotosKit JS 实现实况图预览

web端 实现ios实况图 预览 livephoto相关推荐

最新文章

热门文章

web端实现ios实况图预览 livephoto

web端实现ios实况图预览 livephoto相关推荐