flv.js 教程 npm install flv.js

<template>

  <div class="tunnelvideo">

    <!-- <video id="videoElement" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  controls ></video> -->

    <!-- 视频播放 -->

    <video id="my-player" preload="auto" muted autoplay type="rtmp/flv">

      <source :src="this.URL" />

    </video>

    <!-- <video preload="auto" muted autoplay type="rtmp/flv">

      <source :src="this.URL" />

    </video> -->

    <!-- 按钮 -->

    <button @click="play">播放</button>

    <!-- 快进 -->

    <button @click="go">快进</button>

  </div>

</template>

<script>

import flvjs from "flv.js";

export default {

  data() {

    return {

      URL: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",

    };

  },

  created() {

    console.log("created", flvjs.isSupported());

  },

  // 点击事件

  methods: {

    play() {

      var video = document.getElementById("my-player");

      if (video.paused) {

        video.play();

      } else {

        video.pause();

      }

    },

    // 快进十秒

    go() {

      var video = document.getElementById("my-player");

      video.currentTime = video.currentTime + 10;

    },

  },

};

</script>

<style>

.tunnelvideo {

  width: 100%;

  height: 100%;

  /* background-color: #000; */

}

</style>