vue-video-play使用之播放hls格式视频

开发准备

vue-video-player和videojs-contrib-hls

npm i vue-video-player
npm i videojs-contrib-hls

引入

import { videoPlayer } from 'vue-video-player'
import 'videojs-contrib-hls'

使用

     <videoPlayerv-elseid="jsVideo"ref="videoPlayer":playsinline="true":options="playerOptions"></videoPlayer>
playerOptions: {sources: [{type: 'application/x-mpegURL',src: 'https:xxxxx..m3u8' // 这里写自己的视频地址就可以}],autoplay: true,loop: true,poster: '',controlBar: {fullscreenToggle: false,playToggle: false,volumePanel: false,},
},

video.js 播放器的默认结构如下所示:

Player
├── MediaLoader (has no DOM element)
├── PosterImage
├── TextTrackDisplay
├── LoadingSpinner
├── BigPlayButton
├── LiveTracker (has no DOM element)
├─┬ ControlBar
│ ├── PlayToggle
│ ├── VolumePanel
│ ├── CurrentTimeDisplay (hidden by default)
│ ├── TimeDivider (hidden by default)
│ ├── DurationDisplay (hidden by default)
│ ├─┬ ProgressControl (hidden during live playback, except when liveui: true)
│ │ └─┬ SeekBar
│ │   ├── LoadProgressBar
│ │   ├── MouseTimeDisplay
│ │   └── PlayProgressBar
│ ├── LiveDisplay (hidden during VOD playback)
│ ├── SeekToLive (hidden during VOD playback)
│ ├── RemainingTimeDisplay
│ ├── CustomControlSpacer (has no UI)
│ ├── PlaybackRateMenuButton (hidden, unless playback tech supports rate changes)
│ ├── ChaptersButton (hidden, unless there are relevant tracks)
│ ├── DescriptionsButton (hidden, unless there are relevant tracks)
│ ├── SubtitlesButton (hidden, unless there are relevant tracks)
│ ├── CaptionsButton (hidden, unless there are relevant tracks)
│ ├── SubsCapsButton (hidden, unless there are relevant tracks)
│ ├── AudioTrackButton (hidden, unless there are relevant tracks)
│ ├── PictureInPictureToggle
│ └── FullscreenToggle
├── ErrorDisplay (hidden, until there is an error)
├── TextTrackSettings

controlBar组件的说明

playToggle, // 播放暂停按钮
volumeMenuButton,// 音量控制
currentTimeDisplay,// 当前播放时间
timeDivider, // ‘/’ 分隔符
durationDisplay, // 总时间
progressControl, // 点播流时,播放进度条,seek控制
liveDisplay, // 直播流时,显示LIVE
remainingTimeDisplay, // 当前播放时间
playbackRateMenuButton, // 播放速率,当前只有html5模式下才支持设置播放速率
fullscreenToggle // 全屏控制

  • 参考文档
    https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html#controlbarremainingtimedisplaydisplaynegative

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/8331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24V转3.8V用什么芯片方案-AH8310

在将24V降压至3.8V的电源转换中&#xff0c;AH8310是一个理想的选择。这款芯片是一款降压转换器&#xff0c;输入电压范围为4.5V至36V&#xff0c;输出电压可调&#xff0c;峰值电流可达1.5A。AH8310采用SOT23-6封装&#xff0c;内置MOS&#xff0c;适用于各种应用场合&#xf…

基于微信小程序的网上购物系统的设计与实现

基于微信小程序的网上购物系统的设计与实现 “Design and Implementation of an Online Shopping System based on WeChat Mini Program” 完整下载链接:基于微信小程序的网上购物系统的设计与实现 文章目录 基于微信小程序的网上购物系统的设计与实现摘要第一章 绪论1.1 研究…

PostgreSQL数据库创建只读用户的权限安全隐患

PostgreSQL数据库模拟备库创建只读用户存在的权限安全隐患 default_transaction_read_only权限授权版本变更说明 看腻了就来听听视频演示吧&#xff1a;https://www.bilibili.com/video/BV1ZJ4m1578H/ default_transaction_read_only 创建只读用户&#xff0c;参照备库只读模…

【算法刷题day46】Leetcode:139. 单词拆分

文章目录 Leetcode 139. 单词拆分解题思路代码总结 草稿图网站 java的Deque Leetcode 139. 单词拆分 题目&#xff1a;139. 单词拆分 解析&#xff1a;代码随想录解析 解题思路 只使用了一种方法&#xff0c; 用集合记录wordDict&#xff0c;定义一个valid数组&#xff08;初…

力扣数据库题库学习(5.7日)--1789. 员工的直属部门

1789. 员工的直属部门 问题链接&#x1f60a; 思路分析 一个员工可以属于多个部门。当一个员工加入超过一个部门的时候&#xff0c;他需要决定哪个部门是他的直属部门。请注意&#xff0c;当员工只加入一个部门的时候&#xff0c;那这个部门将默认为他的直属部门&#xff0c…

Compose 生命周期和副作用

文章目录 Compose 生命周期和副作用生命周期副作用APIDisposableEffectSIdeEffectLaunchedEffectrememberCoroutineScoperememberUpdatedStatesnapshotFlowproduceStatederivedStateOf Compose 生命周期和副作用 生命周期 OnActive&#xff1a;添加到视图树。即Composable被首…

2024年教育创新与人文艺术国际学术会议(ICEIHA 2024)

2024年教育创新与人文艺术国际学术会议(ICEIHA 2024) 2024 International Conference on Educational Innovation and Humanities and Arts 一、【会议简介】 2024年教育创新与人文艺术国际学术会议&#xff0c;将探讨教育创新与人文艺术的结合。 本次会议将汇集全球的专家学者…

超越视觉极限:深度学习图像超分辨率算法清单【第二部分】

超越视觉极限&#xff1a;深度学习图像超分辨率算法清单【第二部分】 简介2017年 - SRGAN (Super-Resolution Generative Adversarial Network)2017年 - DRRN (Deep Recursive Residual Network)2018年 - ESRGAN (Enhanced Super-Resolution Generative Adversarial Networks)2…

Socks5代理IP可以运用到哪些应用场景?

在网络技术快速发展的今天&#xff0c;Socks5代理和HTTP代理已成为两种常见的代理服务类型。它们在很多方面都有应用&#xff0c;但Socks5代理以其独特的特点和更加广泛的应用场景而受到青睐。在深入探讨Socks5代理的应用场景之前&#xff0c;让我们首先区分Socks5代理和HTTP代…

JavaScript中的数组方法

push() 功能&#xff1a;在数组的末尾添加一个或多个元素&#xff0c;并返回新数组的长度。 示例代码&#xff1a; let fruits [apple, banana]; let length fruits.push(orange); console.log(fruits); // 输出&#xff1a;[apple, banana, orange] console.log(length); //…

python基础---面向对象相关知识

面向对象 可以把数据以及功能打包为一个整体 类: 名称属性(数据)方法 class Person:def __init__(self, name, age):self.age ageself.name namedef print_info:print(self.name, self.age)定义 #经典类 class Dog1:pass# 新式类 class Dog2(object):pass在python3里面这…

漏洞伴随App无时不在,该怎么办?

漏洞攻击、加密被破坏以及数据泄露是App面临的三大重要安全风险&#xff0c;无论开发者如何防范&#xff0c;攻击者往往会找到新的方法&#xff0c;并依靠最新的工具来破坏App安全性。 统计数据表明&#xff0c;大约82&#xff05;的漏洞是在App程序代码中发现的。如果尽快发现…

实测幻方新出的超强AI大模型,中文能力对比GPT4.0不落下风

目前从网上的消息来看&#xff0c;DeepSeek中文综合能力&#xff08;AlignBench&#xff09;开源模型中最强&#xff0c;与GPT-4-Turbo&#xff0c;文心4.0等闭源模型在评测中处于同一梯队。 话不多说&#xff0c;我们开测&#xff01; 1.首先我们来让他直接来一段逻辑推理【并…

Linux学习笔记:信号

信号 在Linux中什么是信号信号的产生方式硬件产生的信号软件产生的信号异常产生的信号 进程对信号的处理信号的保存信号方法更改函数signal信号处理的更改恢复默认信号忽略 信号的管理信号集 sigset_t对信号集的操作 信号的捕捉过程 在Linux中什么是信号 在 Linux 系统中&…

MATLAB添加自编写.m文件或.mat数据并永久全局调用方法

菜单栏选择设置路径&#xff0c;然后“添加并包含子文件夹”&#xff0c;在弹出窗口中找到目标文件夹即可。此方案可以永久地将文件夹加入MATLAB路径。 添加包含自编写.m文件的文件夹&#xff1a; 即可实现永久全局调用。

【Elasticsearch运维系列】Elasticsearch7.12.1启动指定版本JDK:你学废了吗?

一、背景 一套生ES集群&#xff0c;版本为7.12.1&#xff0c;近期频繁告警&#xff0c;频繁出现索引分片异常&#xff0c;索引状态异常&#xff0c;导致应用无法正常写入ES&#xff0c;另外&#xff0c;也经常出现节点掉问题。通过分析相关ES日志&#xff0c;显示和当前JAVA G…

vue 开发环境的搭建

一、整个流程&#xff1a; 安装nodejs >> 安装vue >> 安装vue-cli >> 初始化 webpack(生成代码) >> 安装依赖 >> 运行vue程序 二、详细安装流程&#xff1a; 1.安装nodejs 下载&#xff1a;https://nodejs.org/dist/v12.18.3/node-v12.18.3-x…

电商核心内容揭秘50:个性化广告与投放策略

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘相关系列文章合集&#xff08;3&#xff09; 电商技术揭秘四十一&#xff1a;电商平台的营销系统浅析 电商技术揭秘四十二&#…

基于卷积神经网络的高光谱分类 CNN(上)

基于卷积神经网络的高光谱分类 CNN 混合光谱HybridSN传统的2-D CNN混合光谱3-D CNN 操作步骤前言&#xff08;准备&#xff09;获取数据以及引入基本的库函数导入相关的包 创建模型模型网络结构代码测试 混合光谱HybridSN 传统的2-D CNN 传统的2-D CNN方法在处理HSI时往往只考…

密码口令初步

一&#xff0c;弱口令&#xff08;ctfhub&#xff09; 1.打开环境&#xff0c;发送到bp的instruder板块&#xff0c;一般id默认为admin&#xff0c;也可以用bp找出来&#xff0c;这里就是 2.先clear &#xff0c;再把password等号后面添加进来&#xff08;add&#xff09;&am…