经真机实测,使用小程序video组件播放hls视频流m3u8格式视频源出现的问题:
一、【#多音轨,视频ts不带声音】
1、pc端(win10、win11)出现无声音、但画面正常;
2、安卓机型播放正常(有声音、有画面);
3、ios机型播放正常(有声音、有画面);
二、【#多音轨,视频ts带有声音】
1、pc端(win10、win11)播放正常(有声音、有画面);
2、安卓大部分机型(荣耀50se、vivoy53s、小米11、荣耀v40)播放正常,个别机型(oppo reno5)有声音但出现电音效果、画面正常;
3、ios机型(iPhone7、iPhone 7plus、iPhone12)播放正常;
<view class="show-case">
<view class="intro">正在播放:{{videoTitle}}</view>
<video class="video-player" src="{{videoUrl}}" />
</view>
<block wx:for="{{videoList}}" wx:key="index">
<button type="primary" class="video-btn" catch:tap="toPlay" data-index="{{index}}">
{{item.title}}
</button>
</block>
js部分:
const videoList = [
{
title: "我和**有个约会第一部(#多音轨,视频ts不带声音)",
videoUrl:
"http://face.cmtest.xyz:50313/hls/multiTrackAndTsWithOutAudio1/playlist.m3u8",
},
{
title: "我和**有个约会第一部(#多音轨,视频ts带有声音)",
videoUrl:
"http://face.cmtest.xyz:50313/hls/multiTrackAndTsWithAudio1/playlist.m3u8",
},
];
Page({
data: {
videoList,
videoUrl: videoList[0].videoUrl,
videoTitle: videoList[0].title,
},
onLoad() {},
toPlay(e) {
let { index } = e.currentTarget.dataset;
this.setData({
videoUrl: videoList[index].videoUrl,
videoTitle: videoList[index].title,
});
},
});
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。