video标签、videoJS插件

video

<template>
  <div>
    <Video :usCannotFF="true" />
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import Video from "@/components/common/video.vue";
@Component({
  components: {
    Video,
  },
})
export default class myExam extends Vue {
  created() {}
}
</script>
<style scoped lang="less">
</style>

<template>
  <!-- 
        属性：
        autoplay        自动播放
        muted           静音
        poster          src  封面
        controlslist    nodownload  取消下载按钮
        disablePictureInPicture     取消画中画
        nofullscreen                取消全屏


        @：
        loadedmetadata  视频的总长度
        play            开始播放
        playing         播放中
        waiting         加载中
        pause           暂停播放
        ended           播放结束
        ratechange      切换播放速度
     -->
  <div>
    剩余时长：{{ residueTime }}
    <video
      id="video"
      ref="video"
      controls
      controlslist="nodownload"
      webkit-playsinline
      playsinline
      x5-video-player-type="h5"
      x5-video-orientation="h5"
      x5-video-player-fullscreen
      @loadedmetadata="loadedmetadata"
      @play="play"
      @playing="playing"
      @waiting="waiting"
      @pause="pause"
      @ended="ended"
      @ratechange="ratechange"
      @timeupdate="timeupdate"
      disablePictureInPicture  
    >
      <!-- <source
        type=""
        src="//video-qn.51miz.com/preview/video/00/00/14/07/V-140724-0ABDCA75.mp4"
      /> -->
      <source
        type=""
        src="//video-qn.51miz.com/preview/video/00/00/14/06/V-140626-A9FE9685.mp4"
      />
      您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
    </video>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({
  components: {},
})
export default class examMe extends Vue {
  @Prop({ default: 0 }) getLast: any; //获取当前播放位置
  @Prop({ default: false }) usCannotFF: any; //是否允许快进
  last: any = 0; //当前播放位置
  cannotFF: any = false; //允许快进
  duration: any = 0; //视频总长
  residueTime: any = 0; //剩余时长
  created() {
    this.last = this.getLast;
    this.cannotFF = this.usCannotFF;
  }
  mounted() {
    this.$nextTick(() => {
      let elevideo: any = this.$refs.video;

      //   elevideo.addEventListener("ratechange", function (val: any) {
      //     //加载数据        //视频的总长度
      //     console.log('用户切换播放速度为：' + elevideo.playbackRate);
      //   });
      //   console.log(elevideo);
      //   var elevideo: any = document.getElementById("video");
      //   console.log(elevideo)

      //   elevideo.addEventListener("loadedmetadata", function () {
      //     //加载数据        //视频的总长度
      //     console.log(elevideo.duration+'秒');
      //   });
      //   elevideo.addEventListener("play", function () {
      //     //播放开始执行的函数
      //     console.log("开始播放");
      //   });
      //   elevideo.addEventListener("playing", function () {
      //     //播放中
      //     console.log("播放中");
      //   });
      //   elevideo.addEventListener("waiting", function () {
      //     //加载
      //     console.log("加载中");
      //   });
      //   elevideo.addEventListener("pause", function () {
      //     //暂停开始执行的函数
      //     console.log("暂停播放");
      //   });
      //   elevideo.addEventListener(
      //     "ended",
      //     function () {
      //       //结束
      //       console.log("播放结束");
      //     },
      //     false
      //   );
    });
  }
  loadedmetadata(val: any) {
    console.log(val);

    this.$nextTick(() => {
      let elevideo: any = this.$refs.video;
      console.log(elevideo.duration + "秒");
      this.duration = elevideo.duration;
    });
  }
  play() {
    console.log("开始播放");
  }
  playing() {
    console.log("播放中");
  }
  waiting() {
    console.log("加载中");
  }
  pause() {
    console.log("暂停播放");
  }
  ended() {
    console.log("播放结束");
  }
  ratechange() {
    let elevideo: any = this.$refs.video;
    console.log("当前播放速度为：" + elevideo.playbackRate);
    //是否固定播放速度为1
    if (elevideo.playbackRate !== 1) {
      console.log("无法修改");
      elevideo.playbackRate = 1;
    }
  }
  timeupdate() {
    this.$nextTick(() => {
      let elevideo: any = this.$refs.video;
      elevideo.addEventListener("play", function () {
          //播放开始执行的函数
          console.log("开始播放");
        });
      if (elevideo) {
        console.log(elevideo.currentTime);
        let current: any = elevideo.currentTime;
        //当拖动滚动条时大于两秒时，返回原点（是否允许拖动滚动条）
        if (this.cannotFF) {
          if (
            current > 2 &&
            (current - this.last > 2 || this.last - current > 2)
          ) {
            console.log("当前视频无法快进");
            elevideo.currentTime = this.last;
          } else {
            this.last = current;
            this.diffTime(current);
          }
        } else {
          this.diffTime(current);
        }
      }
    });
  }
  diffTime(current: any) {
    let diff: any = Math.floor(this.duration - current);
    this.residueTime =
      (diff / 60 > 1 ? Math.floor(diff / 60) : 0) +
      ":" +
      (diff % 60 > 9 ? diff % 60 : "0" + (diff % 60));
  }
}
</script>
<style scoped lang="less">
#video {
  width: 100%;
  height: 200px;
  object-fit: fill;//铺满
}
//全屏按钮
// #video::-webkit-media-controls-fullscreen-button {
//   display: none;
// }
//播放按钮
// #video::-webkit-media-controls-play-button {
//   display: block!important;
// }
//进度条
// #video::-webkit-media-controls-timeline {
//   display: none;
// }
// //观看的当前时间
// #video::-webkit-media-controls-current-time-display {
//   display: none;
// }
// //剩余时间
// #video::-webkit-media-controls-time-remaining-display {
//   display: none;
// }
// //音量按钮
// #video::-webkit-media-controls-mute-button {
//   display: none;
// }
// #video::-webkit-media-controls-toggle-closed-captions-button {
//   display: none;
// }
// //音量的控制条
// #video::-webkit-media-controls-volume-slider {
//   display: none;
// }
//所有控件
// #video::-webkit-media-controls-enclosure {
//   display: none;
// }

</style>

videoJS
引入：npm install --save-dev video.js
import ‘video.js/dist/video-js.css’;
ts报错在shims-vue.d.ts中：declare module '.js’*
全屏控制：npm install --save videojs-landscape-fullscreen

<template>
  <div>
    <Video-player :options="videoOptions" />
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import VideoPlayer from "@/components/common/VideoPlayer.vue";
@Component({
  components: {
    VideoPlayer,
  },
})
export default class myExam extends Vue {
  videoOptions: any = {
    width: '100%',
    height: '200',
    autoplay: false, //自动播放
    poster: "",//封面地址
    // preload: true,//预加载 auto自动 metadata元数据信息 ，比如视频长度，尺寸等  none 不预加载任何数据，直到用户开始播放才开始下载
    notSupportedMessage: '此视频暂无法播放，请稍后再试',//无法播放时显示的信息
    // techOrder: ['html5', 'flash'],// 兼容顺序
    // sourceOrder: true,
    controls: true, //用户可以与之交互的控件
    loop: false, //视频一结束就重新开始
    muted: false, //默认情况下将使所有音频静音
    playbackRates: [0.5, 1, 1.5, 2],//倍速
    aspectRatio: "16:9", //显示比率
    fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    fullscreen: {
      options: { navigationUI: "hide" },
    },
    sources: [
      {
        src: "//video-qn.51miz.com/preview/video/00/00/14/06/V-140626-A9FE96856.mp4",
        type: "video/mp4",
      },
    ],
  };
  created() {}
}
</script>
<style scoped lang="less">
</style>

<template>
  <div>
    <video
      ref="videoRef"
      class="video-js vjs-matrix vjs-default-skin vjs-big-play-centered"
      id="video"
    ></video>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import videojs from "video.js";
import "videojs-landscape-fullscreen";
@Component({
  components: {},
})
export default class VideoPlayer extends Vue {
  @Prop({
    default: () => {
      return {
        width: "100%",
        height: "200",
        autoplay: false, //自动播放
        poster: "", //封面地址
        // preload: true,//预加载 auto自动 metadata元数据信息 ，比如视频长度，尺寸等  none 不预加载任何数据，直到用户开始播放才开始下载
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //无法播放时显示的信息
        // techOrder: ['html5', 'flash'],// 兼容顺序
        // sourceOrder: true,
        controls: true, //用户可以与之交互的控件
        loop: false, //视频一结束就重新开始
        muted: false, //默认情况下将使所有音频静音
        playbackRates: [0.5, 1, 1.5, 2], //倍速
        aspectRatio: "16:9", //显示比率
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fullscreen: {
          options: { navigationUI: "hide" },
        },
        sources: [],
      };
    },
  })
  options: any;
  player: any = null;
  created() {}
  mounted() {
    let that: any = this;
    this.player = videojs(
      that.$refs.videoRef,
      that.options,
      function onPlayerReady(this: any) {
        let player: any = this;
        // this.landscapeFullscreen()
        console.log("onPlayerReady", player);
        console.log("播放器OK");
        player.on("loadedmetadata", function (val: any) {
          console.log("视频总长度：" + player.duration() + "秒");
        });
        player.on("play", function () {
          console.log("开始/恢复播放");
        });
        player.on("waiting", function () {
          console.log("加载中");
        });
        player.on("playing", function () {
          console.log("播放中");
        });
        player.on("timeupdate", function () {
          console.log(player.currentTime());
        });
        player.on("pause", function () {
          console.log("暂停播放");
        });
        player.on("ended", function () {
          console.log("结束播放");
        });
        player.on("ratechange", function () {
          console.log("切换播放速度" + player.playbackRate());
        });
      }
    );
    //初始化
    this.initVideo();
  }
  initVideo() {
    this.$nextTick(() => {
      this.player.landscapeFullscreen({
        fullscreen: {
          enterOnRotate: true, // 横向旋转设备时进入全屏模式
          exitOnRotate: true, // 纵向旋转设备时退出全屏模式
          alwaysInLandscapeMode: true, // 即使设备处于横向状态，也始终进入全屏模式在纵向模式下（适用于 chromium、firefox 和 ie >= 11）
          iOS: true, //是否在 iOS 上使用假全屏（需要显示播放器控件而不是系统控件）
        },
      });
    });
  }

  beforeRouteLeave(to: any, from: any, next: any) {
    if (this.player) {
      this.player.dispose();
    }
    next();
  }
}
</script>
<style scoped lang="less">
.vjs-matrix {
  width: 100%;
  height: 230px;
  background-color: #fff;
  video {
    object-fit: fill;
    width: 100%;
    height: 200;
  }
}
/deep/ .vjs-has-started {
  .vjs-control-bar {
    height: 5em;
  }
  .vjs-icon-placeholder::before {
    font-size: 2.4em !important;
  }
  .vjs-remaining-time,
  .vjs-playback-rate-value,
  .vjs-icon-placeholder::before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
  }
}
</style>
<!-- videojs.addLanguage('zh-CN', {
"Picture-in-Picture" : "画中画",
"Exit Picture-in-Picture" : "退出画中画",
"Play": "播放",
"Pause": "暂停",
"Current Time": "当前时间",
"Duration": "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
"LIVE": "直播",
"Loaded": "加载完毕",
"Progress": "进度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Mute": "静音",
"Unmute": "取消静音",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "关闭字幕",
"Captions": "内嵌字幕",
"captions off": "关闭内嵌字幕",
"Chapters": "节目段落",
"Close Modal Dialog": "关闭弹窗",
"Descriptions": "描述",
"descriptions off": "关闭描述",
"Audio Track": "音轨",
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
"No compatible source was found for this media.": "无法找到此视频兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
"Play Video": "播放视频",
"Close": "关闭",
"Modal Window": "弹窗",
"This is a modal window": "这是一个弹窗",
"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
", opens captions settings dialog": ", 开启标题设置弹窗",
", opens subtitles settings dialog": ", 开启字幕设置弹窗",
", opens descriptions settings dialog": ", 开启描述设置弹窗",
", selected": ", 选择",
"captions settings": "字幕设定",
"Audio Player": "音频播放器",
"Video Player": "视频播放器",
"Replay": "重播",
"Progress Bar": "进度小节",
"Volume Level": "音量",
"subtitles settings": "字幕设定",
"descriptions settings": "描述设定",
"Text": "文字",
"White": "白",
"Black": "黑",
"Red": "红",
"Green": "绿",
"Blue": "蓝",
"Yellow": "黄",
"Magenta": "紫红",
"Cyan": "青",
"Background": "背景",
"Window": "视窗",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字体尺寸",
"Text Edge Style": "字体边缘样式",
"None": "无",
"Raised": "浮雕",
"Depressed": "压低",
"Uniform": "均匀",
"Dropshadow": "下阴影",
"Font Family": "字体库",
"Proportional Sans-Serif": "比例无细体",
"Monospace Sans-Serif": "单间隔无细体",
"Proportional Serif": "比例细体",
"Monospace Serif": "单间隔细体",
"Casual": "舒适",
"Script": "手写体",
"Small Caps": "小型大写字体",
"Reset": "重启",
"restore all settings to the default values": "恢复全部设定至预设值",
"Done": "完成",
"Caption Settings Dialog": "字幕设定视窗",
"Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
"End of dialog window.": "结束对话视窗" -->