H5实现视频video展示

只需要三步：
第一步：引入插件css和js:

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
 <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

我的需求是手机端播放视频：

.video-js .vjs-control-bar{
            height: 1.5rem;
        }
        .vjs-button > .vjs-icon-placeholder:before{
            font-size: 1rem;
            line-height: 1.5rem;
        }
        .video-js .vjs-progress-holder {
            flex: auto;
            transition: all 0.2s;
            height: .3rem;
        }
        .video-js .vjs-time-control {
            flex: none;
            font-size: .7rem;
            line-height: 1.5rem;
            min-width: 2em;
            width: auto;
            padding: 0 .5rem;
            /* padding-right: 1em; */
        }
        .video-js .vjs-play-progress:before {
            font-size: 0.9em;
            position: absolute;
            right: -0.5em;
            top: -0.1rem;
            z-index: 1;
        }
        
        .video-js .vjs-big-play-button {
                font-size: 3em;
                line-height: 2rem;
                height: 2rem;
                width: 4rem;
             
                cursor: pointer;
                opacity: 1;
                border: 0.06666em solid #fff;
                background-color: #2B333F;
                background-color: rgba(43, 51, 63, 0.7);
                border-radius: 0.3em;
                transition: all 0.4s;
        } 
        .vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before{
            font-size: 1.56rem;
        }
···
第三步：html部分：

<video
id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="640"
height="264"

    data-setup="{}"
  >
     <!-- poster="MY_VIDEO_POSTER.jpeg" -->
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <!-- <source src="MY_VIDEO.webm" type="video/webm" /> -->
    <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>

结果图展示：
![11.png](https://img.haomeiwen.com/i24099909/54405f8746d9fbdf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)