html 播放m3u8格式的视频

夜深人静学前端

已于 2024-07-09 08:22:51 修改

阅读量22

点赞数

文章标签： html 音视频前端

于 2024-07-08 18:26:28 首次发布

原文链接：https://blog.csdn.net/u014696856/article/details/134442845

版权

线上测试地址：m3u8在线播放器 - M3U8 Player

项目问题：

使用中维世纪摄像头，上传到华为云。华为云m3u8画面无法显示。请求接口正常，能够接受到正确的ts视频文件，但是没有画面，效果如下：

解决方法：

1.联系华为云客服，新建工单，确定问题是视频编码格式。

2.中维世纪摄像头系统设置，找一找，找到了编码格式，更改编码格式应用即可。

AVC(h264)	HEVC(H265)	MPEGS(DIVX)	MPEG4(Xvid)
Chrome	正常播放	有音频，无视频	有音频，无视频	有音频，无视频
Firefox	正常播放	有音频，无视频	有音频，无视频	有音频，无视频
IE	正常播放	不能播放	不能播放	不能播放
Edge	正常播放	正常播放	正常播放	正常播放

参考链接：https://zhuanlan.zhihu.com/p/647505005

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>video.js player example</title>
    <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
  </head>
  <body>
    <video id="video" class="video-js vjs-default-skin" controls></video>
    <script>
      var video = videojs("video", {
        techOrder: ["html5"],
        sources: [
          {
            src: "http://220.161.87.62:8800/hls/1/index.m3u8",
            type: "application/x-mpegURL",
          },
        ],
      });
      // video.play();
    </script>
  </body>
</html>