vue 配合 video.js 实现视频播放

1. 导入 video.js 包

npm install video.js -S

 npm install videojs-flash -S
 

2. 代码实现

<template>
  <div>
    <video
      id="my-video"
      class="video-js"
      controls
      preload="auto"
      width="640"
      height="264"
      :poster="videoTitleImg"
      data-setup="{}"
      ref="videoPlayer"

    >
      <source :src="videoSrc" type="video/mp4"/>
      <source src="MY_VIDEO.webm" type="video/webm"/>
      <div class="video-progress" @mousedown="onProgressMouseDown">
        <div class="video-played" ref="progressBar"></div>
      </div>
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
        >
      </p>
    </video>


  </div&