我这测试鸿蒙的还有苹果X及部分机型在微信小程序里无法播放,不知道什么原因;
直播流地址有的是hevc有的是h.264,音频都是aac;
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/alt/video.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"
type="text/javascript"></script>
<!-- <link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.2/alt/video-js-cdn.css" rel="stylesheet">
<script src="./video.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js">
</script> -->
<style>
* {
margin: 0;
padding: 0;
border: none;
}
.video-js .vjs-big-play-button {
font-size: 2.5em !important;
line-height: 2.3em !important;
height: 2.5em !important;
width: 2.5em !important;
-webkit-border-radius: 2.5em !important;
-moz-border-radius: 2.5em !important;
border-radius: 2.5em !important;
background-color: #73859f;
background-color: rgba(115, 133, 159, 0.5) !important;
border-width: 0.15em !important;
margin-top: -1.25em !important;
margin-left: -1.75em !important;
}
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em !important;
}
.video-js .vjs-tech {
position: relative !important;
}
.myvideo-dimensions,
.video-js {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div>
<video id='myvideo' class="video-js vjs-default-skin vjs-big-play-centered" controls>
<!-- hls直播源地址:CCTV1高清 -->
<source type="application/x-mpegURL" id="source-box">
</video>
<!-- <div id="bo" onclick="bofang()">播放</div> -->
<script>
let src ='放入你的直播地址';
let sourceBox = document.getElementById('source-box');
sourceBox.setAttribute("src", src);
var player = videojs('myvideo', {}, function() {
console.log('videojs播放器初始化成功')
})
player.play();
function bofang() {
player.play();
}
</script>
</div>
</body>
这个还是有问题,有的直播地址在鸿蒙和苹果上都有声音,有的是鸿蒙上有声音,但是苹果上没有,也没找几个手机,测试的不准,不知道问题出在哪里,有可能是直播流的格式问题;但是也不确定