禹天 禹天 禹天 禹天
  • 导航首页
  • macOS
  • Windows
  • 学习笔记
  • 推荐好站
  • 用户登录
  • 关于我们
禹天 禹天
  • TAG标签
  • 文章归档
  • 博主推荐
  • 热点排行

HTML5点播m3u8(hls)格式视频

2020-08-25 09:03 / in 学习笔记 / 阅读量:193 / TAG HTML5 m3u8 播放器

这两年来我们发现越来越多的视频应用使用了m3u8格式的视频,因为可以兼容PC、移动端。相比mp4等视频源,m3u8可以减轻服务器压力(按需加载)。HLS是由苹果公司率先提出的一种协议标准,可用于直播。

m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件,m3u8是由一系列的ts文件组成,一般一个ts文件大概5-10秒,这些ts文件通过一个.m3u8文件做索引。用户播放视频时,可随意拖动视频进度,会读取相应进度的ts文件继续观看视频,不必等到下载完整的视频。因此在播放m3u8的时候很少有卡顿的现象。


关于HLS直播的技术示例以及m3u8切片技术我们会在后面有文章介绍。本文只做HLS点播讲解,与直播不同,点播是指视频文件已经在编辑好,随时可播放。


由于HLS是由Apple公司提出的,所以在iOS电脑或手机上,你可以直接使用Safari浏览器的<video>播放m3u8格式视频文件。而其他浏览器则需要借助hls.js来兼容m3u8。


使用hls.js,不需要任何定制的播放器,只需要<video>元素就能播放m3u8。


加载js和播放元素


在需要放置视频的页面位置上加入video元素和hls.js文件。


<video id="video" controls width="100%"></video>

<script src="hls.js"></script>

调用hls.js

首先判断浏览器是否支持hls,如果支持就实例化new Hls(),加载m3u8源,然后播放。如果不支持hls,而支持苹果原生应用,则播放另一个m3u8源。


var video = document.getElementById('video');

  if(Hls.isSupported()) {

    var hls = new Hls();

    hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');

    hls.attachMedia(video);

    hls.on(Hls.Events.MANIFEST_PARSED,function() {

      video.play();

  });

 } else if (video.canPlayType('application/vnd.apple.mpegurl')) {

    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';

    video.addEventListener('loadedmetadata',function() {

      video.play();

    });

  }


运行,试着用PC浏览器和手机访问,你会发现m3u8的播放很流畅。


演示地址

https://www.helloweba.net/demo/2018/hls/

下载源码

helloweba_hls.zip


支付宝 微信
猜你喜欢
速学PHP视频教学,简单粗暴第六天
速学PHP视频教学,简单粗暴第二天
对博客的理解
phpcms v9调用点击量、随机增加点击量的方法
评论 (0)
您只有登录后才可以评论~立即登录
暂无评论
Copyright @2019-2099 禹天的博客.All Rights Reserved 京ICP备12013512号-1 京公网安备11011502004272.
搜索
您将离开本站并访问