在SweetAlert中显示视频

是通过将视频嵌入到弹窗中实现的。SweetAlert是一个强大的JavaScript库，用于创建漂亮和可定制的警告框、确认框和提示框等交互式弹窗。

要在SweetAlert中显示视频，可以按照以下步骤进行操作：

1. 准备视频文件：首先，确保你有一个适当的视频文件，可以是MP4、WebM或其他受支持的视频格式。确保视频文件位于您的项目文件夹中。
2. 引入SweetAlert库：在HTML文件中，使用合适的方式引入SweetAlert库。可以使用CDN链接或将SweetAlert的JavaScript和CSS文件下载到本地并引用。
3. 创建触发显示视频的按钮：在HTML中创建一个按钮或其他元素，当点击时将显示SweetAlert弹窗。例如：

<button id="showVideoButton">显示视频</button>

1. 编写JavaScript代码：在JavaScript文件中，使用适当的事件监听器来捕捉按钮点击事件，并在点击时触发SweetAlert弹窗。

document.getElementById('showVideoButton').addEventListener('click', function() {
  Swal.fire({
    html: '<video src="path/to/video.mp4" controls></video>',
    showCloseButton: true,
    showConfirmButton: false,
    customClass: {
      content: 'video-swal',
    },
  });
});

在上面的代码中，html选项指定了SweetAlert弹窗的内容，其中使用了<video>标签嵌入视频文件。controls属性可添加视频播放器控制条。showCloseButton选项显示关闭按钮，showConfirmButton选项隐藏确认按钮。customClass选项用于添加自定义类名以进行样式调整。

1. 添加CSS样式：为了使弹窗中的视频正确显示和布局，需要添加一些自定义CSS样式。例如：

.video-swal {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

在上面的代码中，将弹窗的宽度设置为80%、水平居中显示，并使用Flex布局使视频垂直居中。

通过上述步骤，您可以在SweetAlert弹窗中成功显示视频。当点击按钮时，SweetAlert弹窗将出现，其中包含嵌入的视频。用户可以播放、暂停和控制视频的其他功能。

推荐的腾讯云相关产品和产品介绍链接地址：

• 视频点播（云点播）：腾讯云提供的音视频点播解决方案，可用于存储、管理和播放各种类型的音视频内容。它提供了丰富的功能和服务，如视频上传、转码、截图、水印、加密、播放等。了解更多：https://cloud.tencent.com/product/vod

请注意，这只是腾讯云的一个产品示例，其他云服务提供商也可能提供类似的音视频相关产品和服务。