关于H5播放Http Live Streaming m3u8格式视频

HLS,Http Live Streaming 是由Apple公司定义的用于实时流传输的协议,HLS基于HTTP协议实现,传输内容主要包括两部分,一是M3U8描述文件,二是TS媒体文件。

因为是苹果出的视频播放格式,所以PC端除了safari别的浏览器基本都不支持,微软的edge一推出就支持,下图是各个浏览器的具体支持情况

可以看到android和ios基本可以认为都支持的,我用的hls.js来播放

项目https://github.com/video-dev/hls.js

使用方式也很简单,直接看他给的示例就行,主要是传入m3u8的描述文件,然后会加载ts文件片播放,后台ts文件路径要正确

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById(‘video‘);
    var hls = new Hls();
    hls.loadSource(‘https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8‘);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>
时间: 2024-10-06 09:06:24

关于H5播放Http Live Streaming m3u8格式视频的相关文章

vue播放rtmp、hls m3u8格式视频

选用Video.js作为视频播放库,如果要支持hls m3u8还需要videojs-contrib-hls组件的支持. 安装Video.js npm install --save video.js 安装videojs-contrib-hls npm install --save videojs-contrib-hls 创建一个vue的播放组件 src/components/VideoPlayer/index.vue <template> <div> <video ref=&q

html页面引用video.js播放m3u8格式视频

//head里面的内容,我是采用cdn引用的方式,因为项目太小 //只粘贴了不分代码,都是主要的,只要视频没问题,如果不能播放,建议换一个视频源,代码绝对没问题 都可以播放,下面video样式那里,一共三层, <head> <meta charset="utf-8" /> <title>二级造价</title> <script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.

vue.js+video.js+videojs-contrib-hls支持PC端播放m3u8格式的视频

最近项目中PC需要支持m3u8格式的视频播放 项目框架是vue.js 参考网上教程npm video.js 和  videojs-contrib-hls 项目本地测试OK 打包上线插件内报错 所以最后不得了当外部js 引入 才解决 同时需要引入video.js.css样式 classl类名改为 如图 video.js初始化写在mounted内 如此可以正常的播放m3u8格式的视频了 原文地址:https://www.cnblogs.com/xk-one/p/9243323.html

video.js支持m3u8格式直播

为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题,还可以有各种视频状态接口暴露,优化体验 核心代码: <!DOCTYPE html> <html> <head> <title>videojs支持hls直播实例</title> <link href=".

多媒体文件格式(三):M3U8 格式

一.M3U8 格式标准介绍 M3U8文件是指UTF-8编码格式的M3U文件.M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放. M3U8是一种常见的流媒体格式,主要以文件列表的形式存在,既支持直播又支持点播,尤其在Android.iOS等平台最为常用. 下面是CCTV6直播播放地址:http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8的M3U8的文件列表: #EXTM3U #EXT-X-VER

直播视频和m3u8格式、flv格式

插件: 1.video.js videojs-flash.js 可以播放rtmp直播流 2. hls.js 在html页面上可以播放m3u8格式的视频,但在react node项目上不行. 3.尝试用videojs-contrib-hls和@videojs/http-streaming失败. 4.尝试用ReactPlayer,应该可以,还未进行~ 原文地址:https://www.cnblogs.com/byayn/p/11179219.html

H5 播放视频常见bug及解决方案

本文摘自:本文来自“小时光茶社(Tech Teahouse)”公众号 原文:https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw 1. 自动播放问题 通过autoplay属性视频的自动播放需要在video标签上添加autoplay属性, 如: <video autoplay><video/> 但是在很多浏览器里,如iOS下并不支持这个属性,在iOS下必须给webview设置: self.wView.allowsInlineMediaPl

【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽了,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视频广告!),之前用canvans渲染,感觉不够太完美,又弄成背景切换形式得(用背景切换形式可以完美解决当一个容器有transform:rotate(90deg)属性时自适应百分比问题,若是canvans需去计算高宽太麻烦还需考虑不同系统). 想要手机端h5播放时不自动全屏比想象的简单,看加粗部分,一

Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型

转自原文 Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型 播放mp4格式的时候提示 原因是在IIS中没有添加 mp4 这种文件格式 解决办法: 打开 MIME 类型,然后右键 添加