Video Player is loading.
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
    • Chapters
    • descriptions off, selected
    • captions off, selected

      HLS Video Banner

      The example of showing a HLS video on the banner.
      On this page

      HLS Video Banner

      Requirements§

      Module
      github.com/hbstack/modules/banner

      Source Code§

      Copy
      ---
      title: "HLS Video Banner"
      description: The example of showing a HLS video on the banner.
      date: 2023-09-01T10:57:18+08:00
      draft: false
      video_js: true
      images:
      - /images/banners/black.jpg
      series:
      - Examples
      categories:
      - Banner
      tags:
      - Videos
      - HLS
      header:
      banner:
      alignment: end
      title: false
      description: false
      video:
      poster: /images/banners/black.jpg
      src: https://devstreaming-cdn.apple.com/videos/streaming/examples/adv_dv_atmos/main.m3u8
      type: application/x-mpegURL
      requirements:
      - github.com/hbstack/header/modules/banner
      example_params:
      - video_js
      ---
      {{% example %}}
      • All
      • English
      • 简体中文
      • 繁體中文
      • Best match
      • Oldest
      • Newest
      • 2020
      • 2022
      • 2023
      • HB Framework Authors
      • Hugo Authors
      • Banner
      • Build Tools
      • Comments
      • Configuration
      • Deployment
      • Develop
      • Footer
      • Header
      • Inline Frame
      • Installation
      • Look and Feel
      • Menus
      • Module
      • Modules
      • Shortcode
      • Sidebar
      • 侧边栏
      • 内容
      • 安装
      • 开发
      • 构建工具
      • 概览
      • 模块
      • 横幅
      • 短代码
      • 菜单
      • 观感
      • 评论
      • 部署
      • 配置
      • 页头
      • 页尾
      • 側邊欄
      • 內容
      • 安裝
      • 概覽
      • 構建工具
      • 模塊
      • 橫幅
      • 短代碼
      • 菜單
      • 觀感
      • 評論
      • 開發
      • 頁尾
      • 頁頭
      • Docs
      • Examples
      • Modules
      • News
      • Showcases
      • Themes
      • Tutorials
      • 教程
      • 文档
      • 新闻
      • 模块
      • 示例
      • 文檔
      • 新聞
      • 模塊
      • Alert
      • Animations
      • AOS
      • Applications
      • asciinema
      • Authors
      • Autoprefixer
      • Back to top
      • Background Image
      • beian
      • Bigger Picture
      • Bilibili
      • Blog
      • Bootstrap
      • Breadcrumb
      • Breakpoint
      • Classic
      • clean
      • Clearfix
      • Cloudflare Pages
      • Code Block Panel
      • CodePen
      • Comments
      • Comments Engine
      • Config Toggle
      • Contact
      • Contact Form
      • Content Panel
      • CSS
      • Dark Mode
      • defaultContentLanguageInSubdir
      • Diagrams
      • Disqus
      • Docker
      • Docs
      • DocSearch
      • Domain
      • Featured Image
      • Figure
      • Fonts
      • Footer
      • Footer Menus
      • frame
      • Gallery
      • GCSE
      • Giscus
      • Gist
      • Git
      • GitHub Pages
      • Go
      • Google
      • Google Fonts
      • graph
      • Header
      • Header Menus
      • Heading Sign
      • Highlight
      • HLS
      • Hooks
      • HTML
      • Hugo
      • Icon
      • iframe
      • Image
      • Image Link
      • Instagram
      • Introduction
      • JavaScript
      • JS
      • JSRun
      • KaTex
      • Language Picker
      • Lead
      • Light Mode
      • Markdown
      • Menus
      • Mermaid
      • Meta
      • Module
      • MPD
      • MPEG-DASH
      • Multilingual
      • NetEase Could Music
      • Netlify
      • News
      • Node.js
      • noscript
      • NPM
      • Pagination
      • Param
      • Picture
      • Pills
      • PostCSS
      • Posts
      • Profile
      • Progress Bar
      • PurgeCSS
      • PWA
      • Ratio
      • ref
      • Related Posts
      • relref
      • Return to top
      • RTLCSS
      • Scrollbar
      • Scrollspy
      • SCSS
      • Search
      • Search Engines
      • Slide
      • Social Links
      • Socials
      • Start Page
      • Staticman
      • Style Guide
      • Syntax Highlighting
      • Table of Contents
      • Taxonomies
      • Theme
      • Themes
      • tidy
      • ToC
      • Toggle
      • Tweet
      • Twikoo
      • TypeScript
      • Utterances
      • Videos
      • Vimeo
      • YouKu
      • YouTube
      • Front Matter
      • JSON
      • TOML
      • YAML
      • 主题
      • 代码块面板
      • 优酷
      • 作者
      • 元模块
      • 公告栏
      • 内容面板
      • 内容面板模块
      • 分类
      • 分页
      • 动画
      • 博客
      • 哔哩哔哩
      • 回到顶部
      • 图库
      • 图标
      • 图片
      • 图片链接
      • 图表
      • 域名
      • 备案
      • 多语言
      • 字体
      • 幻灯片
      • 搜索
      • 文档
      • 文章
      • 断点
      • 新闻
      • 标题链接
      • 浅色模式
      • 深色模式
      • 滚动条
      • 特色图片
      • 目录
      • 相关文章
      • 社交链接
      • 简介
      • 网易云音乐
      • 联系表单
      • 背景图片
      • 菜单
      • 视频
      • 评论
      • 评论引擎
      • 语法高亮
      • 语言选项
      • 谷歌
      • 谷歌字体
      • 返回顶部
      • 进度条
      • 钩子
      • 面包屑导航
      • 页头
      • 页头菜单
      • 页尾
      • 页尾菜单
      • 风格指南
      • 主題
      • 代碼塊面板
      • 備案
      • 優酷
      • 元模塊
      • 內容面板
      • 內容面板模塊
      • 公告欄
      • 分頁
      • 分類
      • 動畫
      • 嗶哩嗶哩
      • 回到頂部
      • 圖庫
      • 圖標
      • 圖片
      • 圖片鏈接
      • 圖表
      • 多語言
      • 字體
      • 幻燈片
      • 文檔
      • 新聞
      • 斷點
      • 標題鏈接
      • 淺色模式
      • 滾動條
      • 特色圖片
      • 目錄
      • 相關文章
      • 社交鏈接
      • 簡介
      • 網易雲音樂
      • 聯繫表單
      • 背景圖片
      • 菜單
      • 視頻
      • 評論
      • 評論引擎
      • 語法高亮
      • 語言選項
      • 谷歌字體
      • 返回頂部
      • 進度條
      • 鉤子
      • 頁尾
      • 頁尾菜單
      • 頁頭
      • 頁頭菜單
      • 風格指南
      • 麪包屑導航