相关文章推荐
深情的香槟  ·  光華國中(高雄) - 歡迎光臨·  3 月前    · 
直爽的风衣  ·  市交通局-唐山市人民政府·  10 月前    · 
礼貌的电影票  ·  李庄讲述前年写认罪书藏头诗事件始末_手机新浪网·  2 年前    · 
坚强的南瓜  ·  嘉兴清华附中怎么样_头条·  2 年前    · 
孤独的橙子  ·  第34周漫画数据周报 | ...·  2 年前    · 
Code  ›  创建基于h5的hls播放器hls.js | 余温旧梦-王世彪的博客
脚本 javascript hls
https://www.sofineday.com/h5-hls-player.html
阳刚的皮带
2 年前
余温旧梦-王世彪的博客
关注公众号
  • 开发桌面程序
  • javascript教程
  • css样式
  • vuejs
  • 部署免费CDN
  • SEO搜索引擎优化
  • vuepress教程
  • redis分布式缓存
  • Golang
  • PHP
  • Python
  • Java
  • NodeJs
  • tomcat
  • ELK
  • Mysql数据库
  • Nosql数据库
  • C/C++底层开发
  • 音视频/流媒体
  • linux服务器
  • nginx服务器
  • 容器技术
  • 负载均衡
  • 项目管理
  • 持续集成
  • 大数据
  • 微信公众号运营
  • markdown用法
赞一个
友链
联系作者

王世彪

努力做个影响他人滴人
关注公众号
  • 开发桌面程序
  • javascript教程
  • css样式
  • vuejs
  • 部署免费CDN
  • SEO搜索引擎优化
  • vuepress教程
  • redis分布式缓存
  • Golang
  • PHP
  • Python
  • Java
  • NodeJs
  • tomcat
  • ELK
  • Mysql数据库
  • Nosql数据库
  • C/C++底层开发
  • 音视频/流媒体
  • linux服务器
  • nginx服务器
  • 容器技术
  • 负载均衡
  • 项目管理
  • 持续集成
  • 大数据
  • 微信公众号运营
  • markdown用法
赞一个
友链
联系作者
  • css

  • 游戏开发

  • android

  • golang

  • javascript

    • javascript开发规范
    • html编码规范
    • typescript转换为javascript
    • 创建基于h5的hls播放器hls.js
      • 示例
    • 动态创建script标签
    • javascript跳转到新页面
    • javascript动态插入html片段
    • javascript文件上传库filepond
    • 富文本编辑器TinyMCE的基础用法
    • javascript markdown编辑器vditor
    • http请求库axios的用法
    • js模板引擎mustache用法
    • javascript多边形计算库jsclipper的用法
  • vuejs

  • 小程序

  • cdn

  • seo

  • vuepress

  • 移动端真机调试方法
  • 前端
  • javascript
王世彪
2021-02-02
目录

创建基于h5的hls播放器hls.js

# 创建基于h5的hls播放器hls.js

本文介绍如何创建基于h5的hls播放器。默认情况下,浏览器并不支持播放hls格式的视频,但是集成开源的hls库hls.js后,可以使用h5自带的video标签播放hls(即m3u8)视频。

# 示例

<!DOCTYPE html>
<head></head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <video id="video"></video>
</body>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'http://demo.com/index.m3u8';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  // hls.js is not supported on platforms that do not have Media Source
  // Extensions (MSE) enabled.
  // When the browser has built-in HLS support (check using `canPlayType`),
  // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
  // element through the `src` property. This is using the built-in support
  // of the plain video element, without using hls.js.
  // Note: it would be more normal to wait on the 'canplay' event below however
  // on Safari (where you are most likely to find built-in HLS support) the
  // video.src URL must be on the user-driven white-list before a 'canplay'
  // event will be emitted; the last video event that can be reliably
  // listened-for when the URL is not on the white-list is 'loadedmetadata'.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
</script>
</html>

官网 (opens new window)

上次更新: 2021-02-05 13:51:25
typescript转换为javascript
动态创建script标签

typescript转换为javascript 动态创建script标签 →

最近更新
01
mysql创建用户
04-09
02
golang错误处理最佳实践
03-17
03
基于proto文件生成rpc接口定义文档
03-11
更多文章>
Theme by Vdoing 王世彪 | MIT License
冀ICP备19016776号-1
 
推荐文章
深情的香槟  ·  光華國中(高雄) - 歡迎光臨
3 月前
直爽的风衣  ·  市交通局-唐山市人民政府
10 月前
礼貌的电影票  ·  李庄讲述前年写认罪书藏头诗事件始末_手机新浪网
2 年前
坚强的南瓜  ·  嘉兴清华附中怎么样_头条
2 年前
孤独的橙子  ·  第34周漫画数据周报 | 新作《诛心之罪》《我的美貌是天生》表现出色_评论
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号