uniapp 在手机端 H5 页面 视频播放页使用 nvue

### 使用 NVUE 创建适用于手机端 H5 页面的视频播放页面 #### 1. 初始化项目结构 为了实现一个基于 NVUE 的视频播放页面，在 `pages` 文件夹下新建文件用于定义该页面。通常情况下，NVUE 和 Vue 组件可以在同一个应用中共存[^1]。 ```javascript // pages/videoPlayer/index.vue 或 index.nvue (取决于配置) ``` #### 2. 配置路由支持 确保项目的 manifest.json 中已开启对 NVUE 页面的支持，并正确设置了路径映射关系： ```json { "usingComponents": {}, "pages":[ { "path":"pages/videoPlayer/index", "style":{ "nvues":true // 启用 nvue 支持 } } ] } ``` #### 3. 编写 NVUE 布局代码 在新创建的 `.nvue` 文件内编写布局逻辑，这里采用 Weex 提供的标准标签来构建界面并嵌入 `<video>` 标签以显示媒体控件[^2]。 ```html <template> <div class="container"> <!-- 设置背景颜色防止透明度问题 --> <div style="background-color:#000;"> <video id="myVideo" :src="videoSrc" controls></video> </div> </div> </template> <script> export default { data() { return { videoSrc: 'https://example.com/path/to/your/video.mp4' }; }, }; </script> <style scoped> .container { width: 750px; height: auto; } /* 调整样式适应不同设备 */ @media screen and (-webkit-min-device-pixel-ratio:2){ .container { font-size: 28px; line-height: 40px;} } </style> ``` 注意：对于 Android 设备上的组件，默认可能是透明背景，因此建议显式指定 background-color 属性以避免视觉异常情况的发生[^3]。 #### 4. 加载自定义字体（可选） 如果有特殊需求要加载外部字体资源，可以通过调用 DOM API 方法 addRule 来完成此操作。 ```javascript import dom from '@dcloudio/uni-app-plus'; dom.addRule('fontFace', { fontFamily: 'CustomFont', src: 'url(./static/fonts/custom-font.ttf)' }); ``` 以上即是在 UniApp 手机端 H5 页面利用 NVUE 技术栈搭建简单视频播放器的方法概述。