前端如何播放m3u8格式的视频

article/2025/9/16 2:18:21

m3u8格式的视频是将文件分成一小段一小段的ts文件,播放完一个在播放下一个,由于每次请求的ts文件都很小,所以基本可以做到无延时播放。目前WEB上主流的直播方案主要是HLS和RTMP,移动端主要是HLS,PC端主要是RTMP。

HLS是苹果推出的,移动端不管是IOS还是Android都天然支持HLS协议,直接在h5页面直接配置即可使用;PC端只有safari浏览器支持,其他浏览器均不支持。

可以用video.js和videojs-contrib-hls.js。video.js是非常好用的插件,关于它如何使用这里就不一一介绍了。

参考代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>前端播放m3u8格式视频</title><link rel="stylesheet" href="./video.css"><script src="./video.js"></script><script src="./videojs-contrib-hls.js"></script>
</head>
<body><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>    <source id="source" src="./assets/video/1080.m3u8"  type="application/x-mpegURL"></video>
</body>
<script>    // videojs 简单使用var myVideo = videojs('myVideo',{bigPlayButton : true, textTrackDisplay : false, posterImage: false,errorDisplay : false,})myVideo.play() // 视频播放myVideo.pause() // 视频暂停
</script>
</html>

对应的路径必须要有切片的ts文件,如何切片可以看这篇文章,否则的话就必须需要后台服务推流


http://chatgpt.dhexx.cn/article/URBChO6X.shtml

相关文章

如何下载m3u8格式视频

小编记得以前手机流量少的时候&#xff0c;电脑上下课程或电影再存到手机上看还是很容易的 现在虽然这种需求比较少&#xff0c;但还是有一些视频想下载下来&#xff0c;不过却发现下不了了因为很多的视频都不提供下载地址或下载的是加密的视频格式 即使我们能通过工具采集到…

Android m3u8网络视频播放

最近在做 m3u8网络视频播放&#xff0c;踩了不少坑&#xff0c;也试了不少的 框架&#xff0c;特别记录一下其中用的比较多的三种 第一种&#xff1a;media:ijkplayer media:ijkplayer 是由 bilbil 提供的开源的视频 框架&#xff0c;但是由过之后感觉不太好用&#xff1a; …

网页在线视频下载教程(m3u8格式介绍及下载教程)

简介&#xff1a; m3u8文件是苹果公司使用的HTTP Live Streaming&#xff08;HLS&#xff09;协议格式的基础。HLS是新一代流媒体传输协议&#xff0c;其基本实现原理为将一个大的媒体文件进行分片&#xff0c;将该分片文件资源路径记录与m3u8文件&#xff08;即playlist&…

什么是m3u8?

什么是m3u8? ​  m3u8是苹果公司推出的视频播放标准&#xff0c;是m3u8的一种&#xff0c;只是编码格式采用的是UTF-8。 m3u8准确来说是一种索引文件&#xff0c;使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址&#xff0c;从而实现在线播放。使用m3u8…

M3U8是什么

m3u8是苹果公司推出的视频播放标准&#xff0c;是m3u8的一种&#xff0c;只是编码格式采用的是UTF-8。   m3u8准确来说是一种索引文件&#xff0c;使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址&#xff0c;从而实现在线播放。使用m3u8格式文件主要因为…

video.js播放m3u8视频

m3u8 是一种基于HTTP Live Streaming&#xff08;HLS&#xff09;文件视频格式&#xff0c;它主要是存放整个视频的基本信息和分片(Segment)组成。目前 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持。 video.js是H5视频播放器&#xff0c;支持播放m3u8视频。这…

下载 .m3u8视频文件

简介 M3U8 是 Unicode 版本的 M3U&#xff0c;用 UTF-8 编码。"M3U" 和 "M3U8" 文件都是苹果公司使用的 HTTP Live Streaming&#xff08;HLS&#xff09; 协议格式的基础&#xff0c;这种协议格式可以在 iPhone 和 Macbook 等设备播放。 上述文字定义来自…

前端播放m3u8格式视频

m3u8是苹果公司推出的视频播放标准&#xff0c;是m3u的一种&#xff0c;只是编码格式采用的是UTF-8。m3u8准确来说是一种索引文件&#xff0c;使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址&#xff0c;从而实现在线播放。 m3u8格式的视频是将文件分成一小…

使用videojs播放m3u8视频

vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库&#xff0c;可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件 m3u8是一个文本文件(播放列表文件)&#xff0c;里面的内容就是被播放的音视频文件路…

网页播放 .m3u8 视频文件

1,使用 dplayer,官网上有例子 <link href"https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel"stylesheet"> <script src"https://cdn.jsdelivr.net/npm/hls.jslatest"></script> <script src"https://cd…

m3u8

1.什么是m3u8&#xff1f; 要想知道什么是m3u8最直接最粗暴的方式是找几个m3u8文件拔出来看看就知道。(话说是驴子是马出来溜溜就知道…) 下面我给出了2个m3u8连接&#xff1a; 1.http://cache.utovr.com/201508270528174780.m3u8 2.http://devimages.apple.com/iphone/sam…

M3U8在线MP4格式

MP4 格式是目前来说较为通用的格式一般的播放器都支持播放&#xff0c;兼容性十分友好。 不过可能会在网站在线播放的时候接触到 m3u8 文件&#xff0c;这种文件格式无法直接下载播放&#xff0c;如果想要在电脑上播放这种视频&#xff0c;则需要把 m3u8 文件转换成mp4格式。 介…

M3U8在线播放

M3U8在线播放 前言一、思路二、代码框架1. 移动端适配2. 改变M3U8地址3. 设置videojs参数4. 增加快进等功能 写在最后 前言 当我们在网上愉快观影的时候&#xff0c;难免会遇到“M3U8格式”的视频。聪明的你应该也发现了&#xff0c;它是没办法直接播放的。它其实只是一个索引…

M3U8文件简介及在线播放器

m3u8文件格式 M3U8是Unicode版本的M3U&#xff0c;用UTF-8编码。“M3U” 和 “M3U8” 文件都是苹果公司使用的 HTTP Live Streaming&#xff08;HLS&#xff09; 协议格式的基础&#xff0c;这种协议格式可以在 iPhone 和 Macbook 等设备播放。m3u8文件其实是 HTTP Live Strea…

m3u8 播放视频

使用m3u8 播放视频&#xff1a; m3u8在线播放 只需放视频链接即可 链接 http://tool.liumingye.cn/m3u8/index.php 下载 m3u8 js css 链接&#xff1a;https://pan.baidu.com/s/1dTAX_1B6hrF50O92a6GxuQ 提取码&#xff1a;yyds 引入到 vue 在index.html里面或者npm 下载 引…

正弦波SFR分辨率测试卡

除非生产商对生产的手机相机有特殊功能要求&#xff0c;否则将采用基于标准的相机手机图像质量评估工作&#xff0c;也就是分辨率测试卡的形式进行相机手机图像质量测评。早期的分辨率测试卡是ISO12233&#xff0c;也是国际针对图像质量一种评估标准。但是随着时代的变化相机评…

Android手机分辨率测试程序

该程序可以测试出个人手机设备的分辨率&#xff0c;属于哪种dpi级别&#xff0c;以便开发参考。 main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android…

sfr测试图像清晰度 C 语言,SFR分辨率测试卡的不足和改进

分辨率测试卡使用SFR来测量手机相机清晰度主要源于它可以提供丰富的空间信息方面的潜力。当呈现SFR曲线(无论是从边缘还是正弦波)时&#xff0c;可能会有些令人费解&#xff0c;特别是当形状不是经典的低通功能时。这也可能是一些从业者放弃它的原因&#xff0c;有利于解释但不…

4k显卡视频测试软件,4K分辨率下体验测试

●4K分辨率桌面体验测试: 4K分辨率 1080P分辨率 所有桌面图标变为原来的1/4!可现实面积迅速增加,桌面可显示图标从原来的250个(25x10)变为1071个(51x20)!可显示的东西迅速增多。不过图标的变小使得鼠标非常不好点,这种情况下鼠标的DPI要足够的高,不然挪动距离会相当大,使…

web兼容性(分辨率)测试插件

web兼容性&#xff08;分辨率&#xff09;测试插件 Resolution Test插件 在谷歌浏览器扩展程序中下载即可 Resolution Test使用