前端实现视频/直播预览

news2025/6/7 17:51:24

有一个需求：后端返回视频的预览地址，不仅要支持这个视频的预览，还需要设置视频封面。

这里有两种情况：

如果是类似.mp4，.mov等格式的视频可以选用原生 video 进行视频展示，并且原生的 video 也支持全屏、音量调节、倍速调节、视频下载、封面设置等等...
如果是类似.m3u8等格式的直播不推荐使用 video，可以使用 Plyr 等实现，这个我会放在后面讲。（一开始我使用的是 ckPlayer，但它在 ios 系统中无法播放带有一些携带 token 等参数的视频地址，因此换了 Plyr）

一、.mp4，.mov 视频预览

<video width="100%" controls :src="video_url" :poster="poster_img" class="video-player"/>

src为视频地址，poster为封面图地址， controls为显示浏览器默认的视频控制栏（播放/暂停，音量调节，进度调节，倍速控制，全屏播放，视频下载...）；
如果不加 controls，用户无法控制视频。

样式方面不过多赘述，可根据实际情况进行调整：

.video-player {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

如果需要支持更多格式的视频播放并进行具体的类型控制，可以用下面的写法：

<video width="100%" controls :poster="posterImage" class="video-player">
    <!-- 支持 MP4 格式 -->
    <source :src="video_url" type="video/mp4">
    
    <!-- 支持 MOV 格式 -->
    <source :src="video_url.replace('.mp4', '.mov')" type="video/quicktime">
    
    <!-- 支持 WebM 格式 -->
    <source :src="video_url.replace('.mp4', '.webm')" type="video/webm">
    
    <!-- 支持 Ogg 格式 -->
    <source :src="video_url.replace('.mp4', '.ogv')" type="video/ogg">
    
    暂不支持播放
</video>

注意：有些 .mp4 视频是 HEVC 编码的（如下图），这类视频在谷歌浏览器中可以播放，但在 Edge 等的浏览器会无法播放，这与内核浏览器的视频格式支持有关，不是 video 标签的问题，如果要做兼容性处理，可以进行转码、使用播放插件，或推荐使用谷歌浏览器访问。

二、直播预览

这里模拟一个场景：在某段时间内进行直播，直播开始前和直播结束后将播放器替换为封面图。

页面结构：

<div v-show="showPlayer" class="live-header-video">
    <video id="live-header-video" playsinline :poster="cover_url"></video>
</div>

<img v-show="!showPlayer" :src="cover_url" alt="">

注意：这里不要写成自闭合的<video /> ！！！

v-show="showPlayer"：仅在满足直播时间条件时显示视频容器
id="live-header-video"：用于 JS 中获取 video DOM
playsinline：在移动设备上避免自动全屏播放
:poster：设置视频封面

变量定义：

import Plyr from 'plyr';
import Hls from 'hls.js';
import 'plyr/dist/plyr.css'

const showPlayer = ref(false)
const header_url = ref('')
const live_start_time = ref('')
const live_end_time = ref('')
const cover_url = ref('')
let videoPlayer = null
let div_video = null

showPlayer：控制是否显示播放器
header_url：视频地址
cover_url：封面地址
live_start_time和live_end_time：直播开始和结束时间
videoPlayer：保存 Plyr 播放器实例
div_video：video DOM 元素，用于绑定 Hls 或 Plyr

核心函数：

const setVideoPlayer = () =>{
  if (header_url.value){
    div_video = document.getElementById('live-header-video')
    videoPlayer = new Plyr(div_video, {
      controls: ['play-large',
        'play',
        'mute',
        'volume',
        'captions',
        'pip',
        'airplay',
        'fullscreen'
      ],
      settings: [],
      fullscreen: {
        enabled: true,
        fallback: true,
        iosNative: true
      }
    })
    const urlObj = new URL(header_url.value);
    if (urlObj.pathname.endsWith('.m3u8')) {
      if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(header_url.value);
        hls.attachMedia(div_video);
        videoPlayer.play()
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          console.log('HLS 流准备就绪');
        });

        hls.on(Hls.Events.ERROR, (event, data) => {
          console.error('HLS 错误:', data);
        });
      }
      else if (div_video.canPlayType('application/vnd.apple.mpegurl')) {
        console.log("不支持Hls.isSupported")
        div_video.src = header_url.value;
      }
      else {
        console.error('不支持 HLS 播放');
      }
    }
    else {
      div_video.src = header_url.value
      div_video.load();
      div_video.addEventListener('loadeddata', () => {
        videoPlayer.play();
      });
    }

    if(live_start_time.value && live_end_time.value) {
      const startDate = new Date(live_start_time.value.replace(" ", "T"));
      const endDate = new Date(live_end_time.value.replace(" ", "T"));

      const currentDate = new Date();

      showPlayer.value = currentDate >= startDate && currentDate <= endDate;
    }
  }
}

代码解析：

div_video = document.getElementById('live-header-video')
videoPlayer = new Plyr(div_video, { ... })

获取 video 元素并初始化 Plyr
Plyr 是视频播放器库，初始化后控制按钮等都由它管理

if (urlObj.pathname.endsWith('.m3u8')) {

判断是否是 .m3u8 流地址

如果是 .m3u8：

使用 Hls.js 加载并绑定流：

if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(header_url.value);
  hls.attachMedia(div_video);
  videoPlayer.play()
  ...
}

若不支持 Hls.js，但浏览器原生支持 .m3u8（如 Safari）：

else if (div_video.canPlayType('application/vnd.apple.mpegurl')) {
  div_video.src = header_url.value;
}

否则提示不支持 HLS 播放。
如果是普通视频文件（非 .m3u8）

div_video.src = header_url.value
div_video.load();
div_video.addEventListener('loadeddata', () => {
  videoPlayer.play();
});

当视频数据加载完成后自动播放

if(live_start_time.value && live_end_time.value) {
  const startDate = new Date(live_start_time.value.replace(" ", "T"));
  const endDate = new Date(live_end_time.value.replace(" ", "T"));
  const currentDate = new Date();

  showPlayer.value = currentDate >= startDate && currentDate <= endDate;
}