vue, H5 播放器video 嵌入APP(andriod，IOS) m3u8不能正常播放，总时长显示不正常，显示正在直播_ios m3u8 不能播放

m3u8是后端同事自己对mp4视频的切割处理，由于我们前端同事对这个格式的视频数据没有去了解，后端同事也不知道这个数据有错，导致我们走了很多的弯路。。

一直以为是前端处理的插件不当导致的不能播放，试了很多是视频插件，后面用xgplayer-hls可以播放其他地方的m3u8数据，但是自己封装的m3u8不能播放，然后改用xgplayer-hls.js，哎，终于能播放了，但是发现这个.m3u8多次请求，正常是.m3u8只请求一次，后面都是请求.ts。多次请求.m3u8会造成服务器的负担，这个就行不通了。

还发现以下问题：

1.  总时长不能正常显示：

2.  数据是保存在数据库的从数据库读取数据，页面却显示正在直播而不是时间和控制栏，播放其他mp4显示控制栏和时间：

css可以修复这个问题：

.album-img /deep/.xgplayer-skin-default .xgplayer-progress {

  display: block !important;

}

.album-img /deep/ .xgplayer-skin-default .xgplayer-live {

  display: none !important;

}

.album-img /deep/.xgplayer-skin-default .xgplayer-time {

  display: block !important;

}

经过大家的研究终于发现原来是自己处理的m3u8数据有问题。

对比图看到不正常的数据后面缺少结束标签。