当前位置：首页 > article >正文

vue判断视频链接是否有效

article 2025/3/14 23:44:57

<el-form-item label="视频链接" prop="videoLink">
  <el-input v-model="form.videoLink" placeholder="请输入视频链接" @blur="checkVideoUrl(form.videoLink)"/>
</el-form-item>

// 判断视频链接是否有效
function checkVideoUrl(src) {
  // 创建一个隐藏的 <video> 元素
  let video = document.createElement("video");
  video.style.display = "none"; // 隐藏该元素
  document.body.appendChild(video);

  // 设置视频源
  video.src = src;

  // 监听视频元数据加载完成事件
  video.addEventListener("loadedmetadata", () => {
    console.log("视频加载成功");
    // 视频链接有效
    // 可以在这里执行成功后的逻辑
    document.body.removeChild(video); // 移除临时创建的 video 元素
  });

  // 监听视频加载失败事件
  video.addEventListener("error", () => {
    console.log("视频加载失败");
    // 视频链接无效
    // 可以在这里执行失败后的逻辑
    document.body.removeChild(video); // 移除临时创建的 video 元素
  });
}