如何在uniapp的h5端实现m3u8文件的播放与暂停时播放时间的记录？

Question

请问各位大佬们如何实现, uniapp在h5端实现播放m3u8文件并且支持控制播放开始时间以及记录播放暂停时间

最好是一种比较稳定的方法

Answer 1

要在uniapp的h5端实现m3u8文件的播放、暂停时播放时间的记录，你可以考虑使用HTML5的视频元素和JavaScript来实现。以下是一种可能的方法：

首先，你需要在页面上创建一个video元素来播放m3u8文件，并添加一个按钮来控制播放和暂停。

<video id="myVideo" width="320" height="240" controls>  <source src="path/to/m3u8file.m3u8" type="application/vnd.apple.mpegurl">  Your browser does not support the video tag.</video><button @click="togglePlay">播放/暂停</button>

然后，在JavaScript中，你可以使用video元素的currentTime属性来获取当前的播放时间，使用play()和pause()方法来控制播放和暂停。同时，你可以在播放和暂停时记录时间。

let video = document.getElementById('myVideo');let startTime = null;let currentTime = null;// 播放/暂停按钮的点击事件function togglePlay() {  if (video.paused) {    video.play();    startTime = Date.now(); // 记录开始时间    currentTime = video.currentTime; // 记录当前播放时间  } else {    video.pause();    currentTime = Date.now() - startTime; // 计算已经播放的时间  }}

这样，你就可以在uniapp的h5端实现m3u8文件的播放，并通过按钮控制播放和暂停，同时记录播放时间了。注意，由于m3u8文件是分段的，所以播放时间可能不准确，你可能需要使用其他方法来获取准确的播放时间。