video 手动 播放 全屏

       <video
          ref="videoPlayer"
          id="my-video"
          preload="meta"
          height="200px"
          width="300px"
          data-setup="{}"
          autoplay
controls
>
          <source src="@/assets/cs.mp4" type="video/mp4" />
        </video>
        <button @click="playVideo">播放</button>
        <button @click="pauseVideo">暂停</button>
        <button @click="toggleFullScreen">全屏</button>
    toggleFullScreen() {
      let video = this.$refs.videoPlayer;
      if (video.requestFullscreen) {
        video.requestFullscreen().catch((err) => {
          console.error(err);
        });
      } else if (video.mozRequestFullScreen) {
        /* Firefox */
        video.mozRequestFullScreen().catch((err) => {
          console.error(err);
        });
      } else if (video.webkitRequestFullscreen) {
        /* Chrome, Safari & Opera */
        video.webkitRequestFullscreen().catch((err) => {
          console.error(err);
        });
      } else if (video.msRequestFullscreen) {
        /* IE/Edge */
        video.msRequestFullscreen().catch((err) => {
          console.error(err);
        });
      }
    },
    playVideo() {
      console.log(this.$refs.videoPlayer);

      this.$refs.videoPlayer.play();
    },
    pauseVideo() {
      this.$refs.videoPlayer.pause();
    },

监听

 mounted() {
    //this.getDataFn()
    var video = document.getElementById("my-video");
    var last = 0;
    //当目前的播放位置已更改时
    video.ontimeupdate = function () {
      var current = video.currentTime;
      if (current - last > 2) {
        //此处是限制跳过几秒 可调整
        video.currentTime = last;
      } else {
        last = current;
      }
    };
    video.onended = function () {
      console.log("视频播放完成");
    };
  },

 当前播放时长

// 假设你的video元素的id是"myVideo"
var video = document.getElementById("myVideo");
var currentTime = video.currentTime; // 获取当前播放时间(秒)
console.log("当前播放时间: " + currentTime + " 秒");
<script>
  var player = videojs('my-video');
  player.on('timeupdate', function() {
    var currentTime = player.currentTime(); // 获取当前播放时间(秒)
    console.log("当前播放时间: " + currentTime.toFixed(2) + "");
  });
</script>

或者

video.addEventListener('loadedmetadata', function() {
    // 当视频的元数据已加载后获取当前播放时间
    var currentTime = video.currentTime;
    console.log('当前播放时间: ' + currentTime + '秒');
});

 

posted @ 2024-12-26 14:50  ThisCall  阅读(81)  评论(0)    收藏  举报