vue3开发移动端H5页面中video无交互自动播放完美解决方案

链接
官网:https://jsmpeg.com/
github:https://github.com/phoboslab/jsmpeg
官方例子:https://jsmpeg.com/perf.html
在线video转ts文件:https://convertio.co/zh/mp4-ts/
本文完整案例代码:https://gitee.com/liubaichao/vue3-video-h5-auto.git

踩坑

一、不用使用任何npm、yarn等安装
npm i jsmpeg
yarn add jsmpeg

切记!!!
二、数据转换格式必须是MPEG-1
几乎所有转化默认都是MPEG-2,一定要确认!!!

<canvas id="canvas" height="350" width="350"></canvas>
<script setup>
import { ref , onMounted } from 'vue';
// 官网源文件必须修改为export var JSMpeg = xxx否则报错
import { JSMpeg } from "@/assets/js/jsmpeg.min.js"
const v1 = ref('')
onMounted(() => {
    console.log(JSMpeg)
    var canvas = document.querySelector('#canvas');
    // https://jsmpeg.com/bjork-all-is-full-of-love.ts
    // 注意这里需要将video.mp4转换成ts格式的文件 才能生效 /video/bjork-all-is-full-of-love.ts /video/v1.ts
    var player = new JSMpeg.Player('/video/v1.ts', { 
        canvas: canvas, 
        loop: true, 
        autoplay: false, 
        audio: true,
        throttled: false, // 这里设置为false,不然不触发onSourceCompleted事件
        onSourceCompleted: () => {
            console.log('completed')
        },
        onPlay: () => {
            console.log('play')
        },
        onPause: () => {
            console.log('pause')
        },
        onEnded: () => {
            console.log('end')
        },
        onStalled: (e) => {
            console.log('没有足够的数据用于播放',e)
        },
        onSourceEstablished: (e) => {
            console.log('第一次收到数据',e)
        }
        // chunkSize: 4 * 1024 * 1024, // 使用分块加载数据时,一次加载的块大小。默认1024*1024(1mb)
        // progressive: true, // 是否分块加载数据
    });
    // 解锁声音
    // player.audioOut.unlock(() => {
    //     player.volume = 1;
    // });
    player.play(); 
    // 销毁视频
    // player.destroy()
})
</script>

<think>嗯,用户想用Vue3开发一个影视软件的移动端H5,需要包含轮播图、分类页和收藏页。首先,我得考虑Vue3的环境搭建。Vue CLI还是Vite呢?现在Vite更快,可能更适合,所以应该推荐Vite。然后,项目结构方面,需要组件、路由、状态管理这些基本部分。轮播图的话,可能需要用第三方库,比如Swiper,它支持Vue3,而且移动端兼容性好。分类页需要展示不同类型的影视,可能需要用弹性布局或者网格布局,适应不同屏幕尺寸。数据获取方面,可能需要模拟数据或者用axios请求后端API。收藏页的话,需要状态管理,比如Pinia来管理收藏状态,保持响应式。路由配置使用Vue Router,设置三个主要页面。响应式设计方面,使用viewport和媒体查询,或者UI框架像Vant来优化移动端体验。还需要考虑图片懒加载和路由懒加载优化性能。用户可能还希望有交互反馈,比如收藏时的提示,可以用Toast组件。最后,部署方面,打包成静态文件部署到服务器。可能还需要考虑SEO和性能优化,比如SSR,但移动端H5可能更注重首屏加载速度。需要提醒用户处理跨域问题,如果调用接口的话。测试的话,用真机调试确保触摸滑动正常。嗯,大概这样,结构清晰,步骤明确,用户应该能跟着步骤搭建起来。</think>以下是一个基于 Vue3移动端影视类 H5 应用开发方案介绍,包含轮播图、分类页、收藏页的核心实现思路: --- ### 一、技术栈选型 1. **框架**:Vue3 + Composition API + TypeScript 2. **构建工具**:Vite(推荐)或 Vue CLI 3. **UI 组件库**:Vant 4(专为移动端设计的 Vue3 组件库) 4. **路由管理**:Vue Router 4 5. **状态管理**:Pinia(Vue3 官方推荐) 6. **请求库**:Axios 7. **轮播组件**:Swiper 9+(需配合 vue-awesome-swiper 插件) --- ### 二、核心功能实现 #### 1. 轮播图模块 ```vue <template> <swiper :autoplay="{ delay: 3000 }" :pagination="{ clickable: true }" :modules="modules" > <swiper-slide v-for="(item, index) in banners" :key="index"> <img :src="item.image" class="swiper-img" /> </swiper-slide> </swiper> </template> <script setup> import { Swiper, SwiperSlide } from &#39;swiper/vue&#39; import { Autoplay, Pagination } from &#39;swiper/modules&#39; import &#39;swiper/css&#39; import &#39;swiper/css/pagination&#39; const modules = [Autoplay, Pagination] const banners = ref([]) // 从接口获取轮播数据 </script> ``` #### 2. 分类页实现 ```vue <template> <van-tabs v-model:active="activeTab"> <van-tab v-for="category in categories" :title="category.name" :key="category.id" > <video-list :list="currentVideos" /> </van-tab> </van-tabs> </template> <script setup> import { ref, computed } from &#39;vue&#39; import { Tab, Tabs } from &#39;vant&#39; const activeTab = ref(0) const categories = ref([...]) // 分类数据 const videos = ref([...]) // 视频数据 const currentVideos = computed(() => { return videos.value.filter( item => item.categoryId === categories.value[activeTab.value].id ) }) </script> ``` #### 3. 收藏功能实现 ```ts // stores/collection.ts export const useCollectionStore = defineStore(&#39;collection&#39;, { state: () => ({ collectedItems: new Set<string>() }), actions: { toggleCollection(id: string) { this.collectedItems.has(id) ? this.collectedItems.delete(id) : this.collectedItems.add(id) } } }) ``` --- ### 三、关键优化点 1. **图片懒加载**: ```vue <van-image lazy-load :src="item.poster" :webp="true" :options="{ quality: 80 }" /> ``` 2. **路由懒加载**: ```js const routes = [ { path: &#39;/&#39;, component: () => import(&#39;@/views/Home.vue&#39;) } ] ``` 3. **手势优化**: ```css /* 防止移动端点击延迟 */ * { touch-action: manipulation; } /* 滑动容器优化 */ .swiper-container { -webkit-overflow-scrolling: touch; } ``` --- ### 四、移动端适配方案 1. Viewport 配置: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 2. REM 适配(推荐 postcss-pxtorem): ```js // vite.config.js import postcsspxtorem from &#39;postcss-pxtorem&#39; export default { css: { postcss: { plugins: [ postcsspxtorem({ rootValue: 37.5, // 设计稿宽度/10 propList: [&#39;*&#39;] }) ] } } } ``` --- ### 五、项目结构建议 ``` src/ ├─ assets/ # 静态资源 ├─ components/ # 公共组件 ├─ stores/ # Pinia 状态管理 ├─ router/ # 路由配置 ├─ services/ # API 接口 ├─ types/ # TS 类型定义 ├─ utils/ # 工具函数 ├─ views/ # 页面组件 │ ├─ Home.vue # 首页(含轮播) │ ├─ Category.vue # 分类页 │ └─ Favorite.vue # 收藏页 └─ App.vue ``` --- ### 六、性能优化建议 1. 使用 `v-show` 替代频繁切换的 `v-if` 2. 对长列表使用虚拟滚动(建议 `vue-virtual-scroller`) 3. 接口数据缓存(可结合 localStorage) 4. 关键资源预加载:`<link rel="preload">` 5. 使用 WebP 格式图片 --- 以上方案可快速搭建一个基础影视类 H5 应用,实际开发中需根据具体需求补充以下内容: - 视频播放器集成(推荐 `xgplayer`) - 用户登录鉴权 - 搜索功能实现 - 历史记录功能 - 下拉刷新/上拉加载更多
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嫣嫣细语

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值