视频

Media Optimizer 的 Video 功能插件允许 TinyMCE 用户直接在编辑器中上传、处理和嵌入图像和视频。

概述

Media Optimizer 的 Video 功能插件通过强大的视频处理功能扩展了 TinyMCE，允许用户直接在编辑器中上传、处理和嵌入视频。该插件利用 Uploadcare 的基础设施提供视频处理、自定义视频播放器功能和响应式视频大小调整。

主要优势

• 直接在编辑器中上传和优化视频

• 具有可配置属性的自定义视频播放器

• 视频海报图像生成

• 响应式视频大小调整

• 支持 MP4 和 WebM 格式

• 拖放视频上传

• 基于 URL 的视频插入

• 视频控件自定义

• 视频的无障碍功能

交互示例

HTML

<textarea id="uploadcare-video">
<h1>体验马略卡岛：户外天堂</h1>
<p><span style="color: #4e5c73;">通过我们的独家视频内容发现马略卡岛的户外生活方式和自然美景。从海滩篝火到山地探险，体验这个地中海天堂为何成为户外爱好者的理想目的地。&nbsp;</span></p>

<h2>篝火旁的夜晚</h2>
<p>观看这段迷人的视频，展示马略卡岛户外生活方式的神奇氛围：</p>
<p><uc-video uuid="83fd9f98-1939-4d99-b5e3-85563f89f5fb" fluid="true" style="width: min(3840px, 100%);" class="tox-uc-video" contenteditable="false" controls="true" /></p>
<p><em>体验海滩聚会的温暖、星空下篝火的噼啪声，以及使马略卡岛成为户外生活理想目的地的宁静氛围。</em></p>

<h2>马略卡岛的户外生活方式</h2>
<p>我们的岛屿天堂不仅仅提供美丽的海滩&mdash;—它还提供完整的户外生活方式体验：</p>

<ul>
<li><strong>海滩篝火</strong> 在地中海星空下</li>
<li><strong>徒步路径</strong> 穿越特拉蒙塔纳山脉</li>
<li><strong>水上运动</strong> 在清澈的绿松石色水域中</li>
<li><strong>骑行路线</strong> 穿过迷人的乡村村庄</li>
<li><strong>攀岩</strong> 在壮观的海岸悬崖上</li>
<li><strong>日落聚会</strong> 与朋友和家人</li>
</ul>

<h2>开始你的马略卡岛冒险</h2>
<p>准备好体验户外天堂了吗？ <a href="tiny.cloud">立即联系我们</a> 了解更多关于马略卡岛户外生活方式的信息，并学习如何捕捉你自己的神奇时刻。</p>

<h3>你可以测试的视频功能：</h3>
<ul>
<li><strong>上传新视频</strong> 通过工具栏中的 uploadcare 按钮</li>
<li><strong>拖放</strong> 视频文件直接到编辑器中</li>
<li><strong>调整视频大小</strong> 通过拖动角柄</li>
<li><strong>视频控件</strong> - 播放、暂停、音量、全屏等</li>
<li><strong>视频属性</strong> - 配置自动播放、循环、静音等设置</li>
<li><strong>支持的格式</strong> - MP4、WebM 和其他视频格式</li>
</ul>
</textarea>

JS

tinymce.init({
  selector: "textarea#uploadcare-video",
  plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
  uploadcare_public_key: '<your-public-key>',
  // Video configuration
  uploadcare_video_properties: {
  autoplay: false,
  controls: true,
  loop: false,
  muted: true,
  preload: 'metadata',
  posterOffset: "0:10",
  showLogo: false,
  fluid: true,
},
  a11y_advanced_options: true,
  toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview",
  height: 700,	
  content_style: `
  body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.17em; }
  h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
  p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
  p { line-height: 1.6; margin: 0; } 
  p + p { margin-top: 1rem; }
  a { color: #2b70e3; }
  blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
  figcaption { font-size: 0.875em; }
  uc-video { display: block; margin: 1rem 0; width: 100%; }
  `
});

基本设置

要将 Media Optimizer 的 Video 功能插件添加到编辑器，请在编辑器配置的 plugins 选项中包含 uploadcare。

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>', // Required for Uploadcare integration
});

有关如何使用模块打包器打包此插件的信息，请参阅 打包 TinyMCE - 概述。

Media Optimizer 的 Video 功能插件使用与 Media Optimizer 插件相同的插件代码 uploadcare。当上传视频文件时，视频功能会自动启用。

当使用 webpack 或类似工具打包 TinyMCE 时，为了让视频功能正常工作，需要设置 uploadcare_resources 选项，因为它会告知插件视频播放所需的额外 JavaScript 资源的存放位置。

视频操作

以下是 Video Optimizer 插件提供的功能概览：

功能	图标	描述
上传		通过拖放、文件选择或 URL 输入来上传视频
从 URL 上传		从 URL 上传视频

以下是视频元素可用的视频播放器控制选项：

操作	描述
播放	自定义视频播放器的控制和行为
静音	使视频静音
取消静音	取消视频静音
滑块	显示视频的播放进度，并允许用户拖动滑块以跳转到视频的特定时间点
调整大小	更改视频的大小（启用时）
剩余时间	显示视频的剩余时间
画中画	为视频启用画中画模式
设置	打开视频设置菜单
全屏	为视频启用全屏模式
UC 标志	显示 Uploadcare 标志

选项

以下配置选项会影响 Media Optimizer 的视频功能插件的行为：

uploadcare_video_properties

配置视频元素的视频播放器属性和行为。

类型： Object

默认值： 见下方属性表

属性

属性	类型	有效值	默认值	描述
autoplay	Boolean	true、false、undefined	undefined	页面加载时自动开始播放视频。注意：即使启用了自动播放，现代浏览器也可能会根据其自动播放策略，推迟或阻止播放，直到用户与页面进行交互。
controls	Boolean	true、false	true	显示视频播放器的控件（播放/暂停、音量、时间轴、全屏等）。禁用后，用户仍可通过键盘快捷键或编程方法控制播放。
disablePictureInPicture	Boolean	true、false、undefined	undefined	禁用视频播放器的画中画功能。启用后，用户无法使用画中画模式。
height	Number 或 String	像素或 CSS 值	undefined	设置视频播放器的高度。接受数值（解释为像素）或 CSS 值，如 "100%"、"50vh" 或 "auto"。当提供数值时，将以带 px 单位的内联 CSS 样式应用（例如 height: 360px）。
loop	Boolean	true、false、undefined	undefined	视频播放到结尾时自动从头开始重新播放。适用于背景视频或连续循环播放的内容。
muted	Boolean	true、false、undefined	undefined	默认将视频音频静音。通常与 autoplay 结合使用，因为大多数浏览器要求视频静音才能实现自动播放。
poster	String	有效 URL	undefined	设置一个在视频开始播放前显示的海报图像（缩略图）。为获得最佳效果，图像应与视频的纵横比匹配。
posterOffset	String	时间格式 "MM:SS" 或 "H:MM:SS"	undefined	设置从视频生成海报图像的时间偏移量。当未指定 poster 时，此值确定用于海报的帧。格式："0:10" 表示 10 秒，"1:30" 表示 1 分 30 秒。
preload	String	auto、metadata、none	undefined	控制预加载的视频数据量：auto 加载整个视频，metadata 仅加载基本信息，none 在播放开始前不加载任何内容。性能考虑：使用 metadata 可以改善页面加载时间和带宽节省，auto 可以实现即时播放而不产生缓冲延迟，none 可以在可能不播放视频的情况下最大程度地节省带宽。
showLogo	Boolean	true，false	false	在视频播放器上显示 Uploadcare logo 叠加层。
width	Number 或 String	像素或 CSS 值	undefined	设置视频播放器宽度。接受数值（解释为像素）或 CSS 值，如 "100%"，"50vw" 或 "auto"。

示例：基本视频播放器配置

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_video_properties: {
    autoplay: false,
    controls: true,
    loop: false,
    muted: true,
    preload: 'metadata',
    poster: 'https://placehold.co/600x400', // 可选的封面图片 URL
    posterOffset: '0:10', // 封面生成的时间偏移
    width: 640,
    height: 360,
    showLogo: false
  },
});

附加资源

有关 HTML 视频元素属性及其行为的综合信息，请参阅 MDN 视频元素文档。

uploadcare_video_resize

控制是否可以在编辑器中直接调整视频元素的大小。

类型：Boolean

默认值：true

有效值：true，false

行为

值	行为
true (默认)	允许通过在 object_resizing 配置中添加 uc-video 来调整视频大小
false	通过从 object_resizing 配置中移除 uc-video 来禁用视频大小调整

示例

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_video_resize: false
});

自定义视频元素

插件创建了一个自定义 <uc-video> 元素，当通过 Uploadcare 的基础设施处理视频时，该元素将替换标准的 HTML <video> 元素。

示例：具有固定尺寸的自定义视频元素（非响应式）

<uc-video
  uuid="video-uuid-here"
  class="tox-uc-video"
  contenteditable="false"
  data-setup="{}"
  controls="true"
  autoplay="false"
  loop="false"
  muted="false"
  preload="metadata"
  poster="https://example.com/poster.jpg"
  showlogo="false"
</uc-video>

工具栏按钮

Media Optimizer 的视频功能插件提供了以下工具栏按钮：

标识符	描述
uploadcare	插入图像占位符元素。该占位符支持通过拖放、文件选择或提供 URL 上传图像。
uploadcare-video	插入视频占位符元素。该占位符支持通过拖放、文件选择或提供 URL 上传视频。

这些工具栏按钮可以通过以下方式添加到编辑器中：

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

Media Optimizer 的视频功能插件提供了以下菜单项：

标识符	描述
uploadcare	插入图像占位符元素。该占位符支持通过拖放、文件选择或提供 URL 上传图像。

这些菜单项可以通过以下方式添加到编辑器中：

• menu 配置选项。

• contextmenu 配置选项。

• 自定义菜单工具栏按钮。