dede手机版视频如何适配不同设备？

1. 电脑版视频的调用与展示
2. 手机版视频的适配与优化

第一部分：电脑版视频的调用与展示

在 DedeCMS 中，视频内容通常存储在两种地方：模型或文章模型,调用方式略有不同。

使用自定义视频模型（推荐）

这是最专业、最灵活的方式,专门为视频内容设计。

1. 创建视频内容模型

   • 进入后台：核心 -> 内容模型管理 -> 添加新模型。
   • 模型名称：视频”。
   • 模型表：dede_addonvideo（这是 DedeCMS 自带的视频模型表，直接选择即可）。
   • 字段管理：系统会自动为 dede_addonvideo 表生成对应的字段，如 video（视频地址）、playtime（播放时长）等，你可以根据需要添加更多字段，如导演、主演等。

2. 在栏目中使用该模型

   • 进入 频道管理 -> 添加栏目。
   • 选择栏目内容模型为你刚刚创建的“视频”模型。

3. 发布视频内容

   
   （图片来源网络，侵删）
   • 在该栏目下发布文章,你会看到专门的视频上传或输入框。
   • 视频上传：DedeCMS 通常支持多种视频格式，并可以自动生成网页播放器（如 JW Player, FlowPlayer 等），上传后，系统会自动将视频地址存入 video 字段。
   • 外部视频链接：你也可以直接粘贴优酷、腾讯、B站等视频分享页的 URL，DedeCMS 有时会自动解析并获取嵌入代码。

4. 前台调用视频

   • 在模板文件（通常是 article_article.htm）中，使用 DedeCMS 的调用标签来显示视频。

   • 调用单个视频：

     {dede:field name='video' /}

     这行代码会直接输出视频播放器代码（如 <embed> 或 <video> 标签）。

     
     （图片来源网络，侵删）

   • 调用视频列表（例如在首页或频道页）：

     {dede:arclist typeid='栏目ID' row='10' channelid='视频模型的ID'}
         <li>
             <a href="[field:arcurl/]">
                 <img src="[field:litpic/]" alt="[field:title/]">
                 <span class="play-icon"></span>
             </a>
             <a href="[field:arcurl/]">[field:title/]</a>
         </li>
     {/dede:arclist}

     • typeid: 指定要调用视频的栏目ID。
     • channelid: 非常重要，指定这是调用视频模型的内容，值为你在“内容模型管理”中看到的“模型ID”。
     • litpic: 调用视频的封面图。

使用文章模型（简单方式）

如果不想创建新模型，也可以直接用文章模型发布视频,但体验稍差。

1. 发布视频内容

   • 在普通文章栏目下发布文章。
   • 将视频代码（如优酷的 <iframe> 代码）直接复制粘贴到文章编辑器的“HTML”源码模式中。

2. 前台调用

   • 调用方式和普通文章列表一样，{dede:arclist}。
   • 在文章详情页模板 article_article.htm 中，直接显示文章内容即可,视频代码会自动包含在内。

第二部分：手机版视频的适配与优化

手机版的关键在于 响应式设计 和 性能优化。

使用 DedeCMS 自带的手机模板（/m/ 目录）

这是最传统的方式,需要为手机版单独制作一套模板。

1. 创建手机版模板

   • 在你的模板目录（如 /templets/default/）下创建一个名为 m 的文件夹。
   • 将电脑版的模板文件（如 index.htm, list_article.htm, article_article.htm）复制到 m 文件夹中。
   • 修改手机版模板：在 m 文件夹中的模板文件里，修改 HTML 结构和 CSS,使其适应手机屏幕。

2. 在手机版模板中优化视频显示

   • 视频宽度自适应：在手机版模板的 CSS 中，设置视频容器的宽度为 100%。

     .video-container {
         width: 100%;
         max-width: 100%; /* 防止视频溢出 */
     }
     video, iframe, embed {
         width: 100% !important;
         height: auto !important;
     }

   • 修改视频调用标签：确保手机版模板中调用视频的标签和电脑版一致，但外层的 CSS 做了响应式处理。

     <!-- 在手机版 article_article.htm 中 -->
     <div class="video-container">
         {dede:field name='video' /}
     </div>

   • 使用更轻量的播放器：电脑版可能功能复杂的播放器在手机上会很卡，可以考虑在手机版模板中替换为更轻量、对移动端更友好的播放器，如 video.js 或 DPlayer，这需要你修改 include/ 目录下的播放器相关文件，或者在手机版模板中手动引入新的播放器 JS/CSS。

使用响应式模板（推荐，现代网站首选）

这种方式一套模板同时适配电脑和手机,是当前的主流做法。

1. 设计响应式模板

   • 在电脑版的模板文件（如 article_article.htm）中，使用 媒体查询（Media Queries） 来为不同屏幕尺寸定义不同的样式。
   • 核心思想：视频播放器本身使用 HTML5 的 <video> 标签,并设置其样式为响应式。

2. 实现步骤

   • 确保视频输出为 HTML5 <video>：DedeCMS 默认的视频模型在支持的情况下会输出 <video> 标签，如果不是，你可能需要修改 /include/ 目录下的视频处理类,或者手动修改模板。

   • 在模板中编写响应式代码：

     <!-- article_article.htm -->
     <div class="video-wrapper">
         {dede:field name='video' /}
     </div>

   • 编写 CSS 样式：

     /* 默认样式，适用于电脑等大屏幕 */
     .video-wrapper video {
         width: 800px; /* 或者 100% */
         height: 450px; /* 保持宽高比 */
         max-width: 100%; /* 确保在小屏幕上不会溢出 */
     }
     /* 媒体查询，针对手机等小屏幕 */
     @media (max-width: 768px) {
         .video-wrapper video {
             width: 100%;
             height: auto; /* 高度自动，保持原始比例 */
             /* 移除可能的黑边，使视频充满容器 */
             object-fit: cover; /* 或者 contain, 根据需求选择 */
         }
     }

     • max-width: 100% 是关键,它保证了视频宽度永远不会超过其父容器的宽度。
     • @media 声明告诉浏览器，当屏幕宽度小于 768px 时,应用新的样式规则。