h5 中原生audio，video不好用怎么办？

一、audio可以封装自定义AudioPlayer，可以实现多个音频进行切换

export class AudioPlayer {
  /** audio标签本身 */
  private audio: HTMLAudioElement;
  /** audio播放列表 */
  private audioList: HTMLAudioElement[];

  /**
   * 初始化audio
   * @param options
   */
  constructor () {
    this.init();
  }

  /**
   * 初始化audio
   */
  private init (): void {
    let { audio } = this;
    if (!this.audio) {
      audio = new Audio();
      audio.autoplay = false;
      audio.loop = false;
      // 初始化为不激活状态
      audio.isActive = false;
      audio.onplay = () => {
        audio.isActive = true;
      };
      audio.onended = () => {
        audio.isActive = false;
      };
      // 添加播放列表
      this.audioList.push(audio);
    }
  }

  /**
   * 播放当前音频，需要把其他音频先暂停，同一时刻只能播放同一音频
   * @param target 当前音频
   */
  private playBefore (target: HTMLAudioElement): void {
    const { audioList } = this;
    audioList.forEach(restAudio => {
      if (restAudio !== target) {
        restAudio.pause();
        restAudio.currentTime = 0.0;
        restAudio.isActive = false;
      }
    });
  }

  /**
   * audio激活状态才能播放
   */
  public play (src:string): void {
    const { audio } = this;
    this.playBefore(audio);
    audio.src = src;
    audio.play();
    audio.isActive = true;
  }

  /**
   * 暂停
   */
  public pause (): void {
    const { audio } = this;
    audio.pause();
  }

  /**
   * 停止播放
   */
  public stop (): void {
    const { audio } = this;
    if (!audio.paused && !audio.ended && audio.isActive) {
      audio.pause();
      audio.currentTime = 0.0;
      audio.isActive = false;
    }
  }
}

二、video可以使用video.js 插件，插件可以统一工具栏，自定义播放按钮，设置缩略图等等

 * 需要注意的是，video.js可以通过css覆盖样式

具体代码如下

VideoPlayer.vue

<template>
  <div>
    <video
      ref="videoPlayer"
      class="video-js"
      webkit-playsinline="true"
      playsinline="true"
    />
  </div>
</template>
<script lang="ts" src="./VideoPlayer.ts"></script>
<style lang="less" src="./VideoPlayer.less"></style>

VideoPlayer.ts

import Vue from 'vue';
import videojs from 'video.js/dist/video.min.js';
import 'video.js/dist/video-js.min.css';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

@Component({})
export default class VideoPlayer extends Vue {
  @Prop({ default: {} }) options: object;
  private player: any;

  /**
   * 初始化页面
   */
  public mounted (): void {
    this.player = videojs(
      this.$refs.videoPlayer,
      Object.assign(this.options, {
        autoplay: false,
        muted: false,
        controls: true
      }),
      function onPlayerReady () {
        // console.log('onPlayerReady', this);
      });
  }

  /**
   * 页面销毁
   */
  public beforeDestroy ():void {
    if (this.player) {
      this.player.dispose();
    }
  }
}

VideoPlayer.less

.video-js button {
  outline: none;
}

.vjs-tech {
  object-fit: cover;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
  height: 100%;
  background-color: #161616;
}

.video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  font-size: 7em;
  line-height: 1.8em;
  height: 2em;
  width: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  background-color: #fff;
  border-width: 0.12em;
  margin-top: -1em;
  margin-left: -1em;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  color: #ddbd71;
}

.video-js .vjs-paused .vjs-big-play-button {
  display: block;
}

.video-js .vjs-controls-disabled .vjs-big-play-button {
  display: none;
}

.video-js .vjs-error .vjs-big-play-button {
  display: none;
}

.video-js .vjs-control-bar {
  font-size: 24px;
}

.vjs-poster {
  background-size: 100% 100%;
  border: none;
}

.video-js .vjs-picture-in-picture-control {
  cursor: pointer;
  flex: none;
  display: none;
}

.video-js .vjs-audio-button {
  display: none;
}

上面是根据楼主业务需求封装的VideoPlayer组件
调用时候就按照下面就行了

 <VideoPlayer
    :options="{
       width: '563',
       height: '307',
       poster: videoCover,
       sources: videoUrl
     }"
  />