如何在uniapp的h5端实现m3u8文件的播放与暂停时播放时间的记录?
  VDvlWkTw2thq 2023年11月24日 22 0

要在uniapp的H5端实现M3U8文件的播放与暂停时播放时间的记录,你可以使用以下步骤:

  1. 首先,你需要在uniapp项目中使用一个支持M3U8播放的视频播放器组件。你可以选择一些开源的视频播放器组件,如video.jshls.js等。安装并引入合适的视频播放器组件。
  2. 创建一个用于记录播放时间的变量,比如playTime,并初始化为0。
  3. 在视频播放器组件中添加事件监听器,以便在播放和暂停时更新播放时间。监听播放事件,将播放时间设置为之前记录的时间,监听暂停事件,将当前播放时间记录到playTime变量中。示例如下:
<template>
  <div>
    <video ref="videoPlayer" @play="onPlay" @pause="onPause"></video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  mounted() {
    // 初始化视频播放器
    this.player = videojs(this.$refs.videoPlayer);
  },
  data() {
    return {
      playTime: 0
    };
  },
  methods: {
    onPlay() {
      // 播放时将播放时间设置为之前记录的时间
      this.player.currentTime(this.playTime);
    },
    onPause() {
      // 暂停时记录当前播放时间
      this.playTime = this.player.currentTime();
    }
  }
};
</script>

在上述示例中,我们使用了video.js作为视频播放器组件。在onPlay方法中,我们将播放时间设置为之前记录的时间,以便在暂停后再次播放时从之前的时间点开始。在onPause方法中,我们记录当前播放时间,以便在暂停后再次播放时从该时间点开始。

请根据你的具体需求和项目环境选择合适的视频播放器组件,并根据组件的使用方法和事件机制进行相应的实现。以上示例只是一个简单的示例,你可能需要根据具体情况进行适当的调整。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月24日 0

暂无评论

VDvlWkTw2thq