首页/新闻资讯/正文详情

html5 直播插件 videojs

发布时间:2026/9/24 16:10:38 来源:云帆数科 栏目:资讯中心
html5 直播插件 videojs
今天又搞了一波视频播放其中项目需要支持直播视频翻阅了之前写的代码感觉太麻烦了所以还是把写在这里吧避免找的时候太麻烦了官网地址Video.js - Make your player yours | Video.jshtml 引入 videojs脚本与cssscript src/static/public/js/video.min.js/script link relstylesheet href/static/public/css/video-js.css //html 部分 video idvideo classvideo-js vjs-16-9 x5-video-player-fullscreen playsinline webkit-playsinline x-webkit-airplay width100% height100% 您的浏览器不支持当前播放器请升级最新的浏览器版本。 /videonew Vue({ el: #app, data: { playIndex: 0, player: null, video: { poster: http://china-beauty.oss-cn-shenzhen.aliyuncs.com/live/192/5203c86471184367ad37a6b3ceb56995.jpg, list: [ { url: http://china-beauty-live.oss-cn-shanghai.aliyuncs.com/live/record/2020-12-26/Stream1608543148068/2020-12-26-11:47:14_2020-12-26-11:48:33.mp4 }, { url: http://china-beauty-live.oss-cn-shanghai.aliyuncs.com/live/record/2020-12-26/Stream1608543225736/2020-12-26-09:58:29_2020-12-26-11:55:34.mp4 }, { url: https://cctvwbcdali.v.myalicdn.com/cctvwbcd/cdrmcctv1_1td.m3u8//直播测试 }] } }, watch: { playIndex(val) { this.playVideo(this.video.list[val]); } }, computed: { }, mounted() { this.player videojs(video, { autoplay: muted, // 是否自动播放 loop: false, controls: true, // 是否显示控件 poster: this.video.poster, sources: [{ src: this.video.list[this.playIndex].url }] }); // 结束监听 this.player.on(ended, () { if (this.playIndex this.video.list.length) { this.playIndex } }) }, methods: { playVideo(sources) { videojs(video).src(sources.url) } } })效果图

相关推荐

Swift-OPA 实践指南:在 Swift 应用中原生评估 OPA IR 策略计划
Swift-OPA 实践指南:在 Swift 应用中原生评估 OPA IR 策略计划

后端认证鉴权云原生 【免费下载链接】opa Open Policy Agent (OPA) is an open source, general-purpose policy engine. 项目地址: https://gitcode.com/gh_mirrors/op/opa 点击查看 免费下载 Swift-OPA 是由 Apple 发起并托管于 OPA 官方组织的 Swift 软件包&… · 2026/9/24 16:10:08

在 Accelerate 中使用 torch.compile 与区域编译(Regional Compilation):从配置到冷启动优化实战
在 Accelerate 中使用 torch.compile 与区域编译(Regional Compilation):从配置到冷启动优化实战

人工智能深度学习分布式训练 【免费下载链接】accelerate 🚀 A simple way to launch, train, and use PyTorch models on almost any device and distributed configuration, automatic mixed precision (including fp8), and easy-to-configure FSDP and DeepSpee… · 2026/9/24 16:10:08

SDR++ 完整指南:免费软件定义无线电,5 分钟听清 FM 与航空波段
SDR++ 完整指南:免费软件定义无线电,5 分钟听清 FM 与航空波段

SDR 完整指南:免费软件定义无线电,5 分钟听清 FM 与航空波段 【免费下载链接】SDRPlusPlus Cross-Platform SDR Software 项目地址: https://gitcode.com/GitHub_Trending/sd/SDRPlusPlus SDR 是一款免费、开源、跨平台的软件定义无线电&#xff… · 2026/9/24 16:10:08

MagicExplorer 工具接口全解:9个精简工具如何驱动AI完成任意浏览任务
MagicExplorer 工具接口全解:9个精简工具如何驱动AI完成任意浏览任务

MagicExplorer 工具接口全解:9个精简工具如何驱动AI完成任意浏览任务 【免费下载链接】MagicExplorer 基于CangjieMagic(Cangjie Agent DSL)开发的自然语言浏览器Agent系统 项目地址: https://gitcode.com/Cangjie-TPC/MagicExplorer MagicExplorer 是一个基… · 2026/9/24 16:41:14

NGINX UI 发布全流程实战指南:从版本号提升到 GitHub Release 与 RainYun 商店上架
NGINX UI 发布全流程实战指南:从版本号提升到 GitHub Release 与 RainYun 商店上架

后端前端运维MCP 服务 【免费下载链接】nginx-ui Yet another WebUI for Nginx 项目地址: https://gitcode.com/gh_mirrors/ngi/nginx-ui 点击查看 免费下载 NGINX UI 是一个基于 Web 的 Nginx 可视化管理面板。本文围绕仓库中定义在 .claude/skills/release/SKILL… · 2026/9/24 16:41:01

WXT 模块系统完全指南:从构建流程扩展到自定义模块实战配方
WXT 模块系统完全指南:从构建流程扩展到自定义模块实战配方

前端开发工具构建工具插件系统 【免费下载链接】wxt ⚡ Next-gen Web Extension Framework 项目地址: https://gitcode.com/gh_mirrors/wx/wxt 点击查看 免费下载 WXT 的模块系统(Module System)是一套允许你在构建流程的不同阶段注入代码、… · 2026/9/24 16:40:55

2026做网站公司有哪些,快来一探究竟吧!
2026做网站公司有哪些,快来一探究竟吧!

2026做网站公司有哪些,快来一探究竟吧! 凤凰网科技《2026中小企业数字化建站成本调研报告》调研500家中小企业发现:SaaS建站占比已从2024年的41%升到2026年的67%,定制开发降到18%,外包代运营只剩4%。背后信号很清楚——… · 2026/9/24 16:40:55

远程软件哪个好用?2026年远程控制工具怎么选
远程软件哪个好用?2026年远程控制工具怎么选

如果你正在搜索“远程软件哪个好用”,先给一个比较实际的结论:没有一款远程软件适合所有人,关键要看你是临时协助、远程办公,还是需要长时间连接和托管。 我把常见需求拆开对比后,比较推荐优先试用支持多端连接、操作路… · 2026/9/24 16:40:49

搞懂 AI Agent 的管道与技-MCP 和 Skill
搞懂 AI Agent 的管道与技-MCP 和 Skill

MCP 和 Skill,是让 AI 从「会聊天」变成「会办事」的两样东西。经常有人搞混,今天一次讲透。 MCP 是什么 MCP,全称 Model Context Protocol,模型上下文协议。Anthropic 2024 年 11 月搞出来的,2025 年底捐给 Linux 基金… · 2026/9/24 16:40:42

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码