在Shopify嵌入Kingsway的视频

为什么不直接粘贴代码？

Shopify 的富文本编辑器（Rich Text Editor）出于安全考虑，往往会在保存时自动过滤掉 <script> 标签。这导致我们直接粘贴完整的视频代码后，视频无法正常加载。

1. 嵌入单个视频

1 .开发者配置（仅需操作一次）

1. 登录 Shopify 后台，进入 Online Store (在线商店) -> Themes (主题)。
2. 在当前主题旁点击 … -> Edit code (编辑代码)。
3. 在左侧目录找到 Layout 文件夹，打开 theme.liquid 文件。
4. 按 Ctrl + F (Mac: Cmd + F) 搜索 </head> 标签。
5. 在 </head> 上方粘贴以下代码：
6. 编辑后点击右上角的Save保存

<!-- Kingsway Video SDK (Global Load) -->
{% if template contains 'product' or template contains 'article' or template contains 'page' %}
  <script src="https://websdk.kingswayvideo.com/vod-player/latest/vod-player.min.js" defer="defer"></script>
{% endif %}

2 .在产品详情页或博客文章中插入视频，请按照以下步骤操作：

1. 准备代码

从Kingsway后台，获取对应视频的代码

2. 插入编辑器

1. 进入 Products (产品) 或 Blog posts (博客文章) 编辑页。
2. 在内容编辑器的工具栏右上角，找到并点击 Show HTML (显示 HTML) 按钮（图标通常是 < >）。
   • 注意：一定要切换模式！直接粘贴在文字框里是无效的。
3. 找到你想插入视频的位置，粘贴上面的代码。
4. 再次点击 < > 图标切回可视化模式。此时你会看到一张图片或黑色占位块，这表示插入成功。
5. 点击 Save (保存) 并预览前台效果。

2. 嵌入视频小部件

在Shopify中，要嵌入视频小部件，做法与嵌入单个视频类似，嵌入theme.liquid的代码，另外添加如下：

<!-- Kingsway Video SDKs (Global Load) -->
<!-- 逻辑说明：我们在原本的基础上增加了 index (首页) 和 collection (集合页)，因为悬浮挂件通常在首页也需要 -->
{% if template contains 'product' or template contains 'article' or template contains 'page' or template contains 'index' or template contains 'collection' %}
  
  <!-- 1. 原有的播放器 SDK (用于普通视频) -->
  <script src="https://websdk.kingswayvideo.com/vod-player/latest/vod-player.min.js" defer="defer"></script>
  
  <!-- 2. 新增的小部件 SDK (用于悬浮窗/轮播) -->
  <script src="https://websdk.kingswayvideo.com/video-widgets/latest/video-widgets.min.js" defer="defer"></script>
{% endif %}

3. 常见问题 (FAQ)

Q1：保存后视频不显示，只有一片黑？

• 检查是否修改了 theme.liquid 文件。
• 等待 1-2 秒，看是否是网络加载慢。
• 检查代码中的 视频ID 是否填写正确，不要有多余的空格。

Q2：视频也是竖屏的，但是两边有黑边？

可以在获取代码处，选择使用竖屏视频