videoJS 视频 + 独一无二皮肤 + mp4/m3u8

推荐和参考文章:

video.js调用-腾讯云开发者社区-腾讯云>  一、总结(点击显示或隐藏总结内容)一句话总结:网上有各种细致的现成的代码可以拿来用,没必要自己死专1、video.js有两种初始化方式?一种是在video的html标签之中一种是使用jicon-default.png?t=N7T8https://cloud.tencent.com/developer/article/1649057?from=15425video.js的使用,打造自定义视频播放器 - 简书温馨提示:在HTML5中,video标签本身有个自定义属性playbackRate[https://www.w3school.com.cn/tags/av_prop_play...icon-default.png?t=N7T8https://www.jianshu.com/p/3b38f795616f 

 

<template><div><el-button@click="openDialog('http://ai-xxxxx4.m3u8', 1)"type="primary">Open Video 1 (.m3u8)</el-button><el-button@click="openDialog('http://xxxxx4.mp4', 2)"type="primary">Open Video 2 (.mp4)</el-button><el-button @click="openDialog('', 3)" type="primary">Unable to play.</el-button><el-button @click="openDialog('http://txax-vssod.cdn.xxxx/8888/', 3)" type="primary">err Link</el-button><el-dialog v-if="showDialog" :visible.sync="showDialog" :title="'Video ' + currentPlayerId" @close="closeDialog"width="720px" class="video-dialog"><div v-if="videoError"><p>{{ videoError }}</p></div><video :id="'videoPlayer' + currentPlayerId" :class="videoClass" style="width: 100%;" controls preload="auto":width="videoWidth"></video></el-dialog></div>
</template><script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';export default {data() {return {showDialog: false,currentPlayerId: null,videoPlayer: null,videoError: null,videoWidth: '720px', // Default widthvideoHeight: '450px', // Default heightvideoClass: 'video-js vjs-default-skin vjs-big-play-centered' // Default class};},methods: {openDialog(url, playerId) {this.showDialog = true;this.currentPlayerId = playerId;this.videoError = null;// Wait for next tick to ensure the element is mounted before initializing Video.jsthis.$nextTick(() => {this.initVideoPlayer(url);this.replacePlaybackRateText();});},closeDialog() {if (this.videoPlayer) {this.videoPlayer.dispose();this.videoPlayer = null;}this.showDialog = false;this.currentPlayerId = null;this.videoError = null;},initVideoPlayer(url) {this.videoPlayer = videojs('videoPlayer' + this.currentPlayerId, {html5: {hls: {overrideNative: true}},playbackRates: [0.5, 0.75, 1.0, 1.25, 1.5, 2],language: 'zh-CN' // 指定使用的语言为中文});this.videoPlayer.on('error', (error) => {console.error('Video playback error:', error);this.videoError = 'Unable to play the video.';});const type = this.getVideoType(url);if (type === 'video/mp4') {this.videoPlayer.src({src: url,type: 'video/mp4'});} else if (type === 'application/x-mpegURL') {this.videoPlayer.src({src: url,type: 'application/x-mpegURL'});}this.videoPlayer.ready(() => {// 忽略未使用的变量/* eslint-disable no-unused-vars */// const videoEl = document.getElementById('videoPlayer' + this.currentPlayerId);// const aspectRatio = this.videoPlayer.videoWidth() / this.videoPlayer.videoHeight();// this.videoWidth = 720;// this.videoHeight = this.videoWidth / aspectRatio;// videoEl.style.height = `${this.videoHeight}px`;this.videoPlayer.play();});},getVideoType(url) {const extension = url.toLowerCase().includes('.mp4') ? 'mp4' : 'm3u8';if (extension === 'mp4') {return 'video/mp4';} else if (extension === 'm3u8') {return 'application/x-mpegURL';} else {return '';}},replacePlaybackRateText() {const playbackRateButton = document.querySelector('.vjs-playback-rate .vjs-playback-rate-value');if (playbackRateButton) {playbackRateButton.textContent = '倍速'; // 替换原始文本为“倍速”}}},beforeDestroy() {if (this.videoPlayer) {this.videoPlayer.dispose();this.videoPlayer = null;}},
};// 在加载 Video.js 播放器之前,添加以下代码
videojs.addLanguage('zh-CN', {'Playback Rate': '倍速'
});
</script><style>
/* Add any custom styles for the video player here */
.video-dialog {.el-dialog__header {border-bottom: none;}.el-dialog__body {padding: 0;}/*.dialog-content {padding:0 40px;}.el-dialog__footer {padding: 10px 10px 10px;border-top: none;} */
}
</style><style>.video-js button{outline: none;
}
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3{ /* 视频占满容器高度 */height: 100%;background-color: #161616;
}
.vjs-poster{background-color: #161616;
}.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {display: block;
}.video-js .vjs-big-play-button { /* 中间大的播放按钮 */font-size: 2.5em;line-height: 2.3em;height: 2.5em;width: 2.5em;-webkit-border-radius: 2.5em;-moz-border-radius: 2.5em;border-radius: 2.5em;/* background-color: #73859f; */background-color: rgba(115, 133, 159, .5);border-width: 0.15em;margin-top: -1.25em;margin-left: -1.75em;
}.video-js.vjs-paused .vjs-big-play-button{ /* 视频暂停时显示播放按钮 */display: block;
}
.video-js.vjs-error .vjs-big-play-button{ /* 视频加载出错时隐藏播放按钮 */display: none;
}/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {font-size: 1.63em;
}/* 加载圆圈 */
.vjs-loading-spinner {font-size: 2.5em;width: 2em;height: 2em;border-radius: 1em;margin-top: -1em;margin-left: -1.5em;
}/* 点击屏幕播放/暂停 */
/* .video-js.vjs-playing .vjs-tech {pointer-events: auto;
} *//* 进度显示当前播放时间 */
/*video.js 默认倒序显示时间,也就是视频播放的剩余时间。要显示当前的播放时间,以及总共视频时长,加2行CSS解决
*/.video-js .vjs-time-control {display: block;padding-top: 1px;
}
.video-js .vjs-remaining-time {/* display: block;padding-top: 1px; */display: none;
}/* 进度条背景色 */
/* 播放进度条背景色 */
.video-js .vjs-play-progress {/* 设置播放进度条的背景色为绿色 */background-color: #26A69A;
}/* 音量条背景色 */
.video-js .vjs-volume-level {/* 设置音量条的背景色为蓝色 *//* background-color: #2196f3; */background-color: #00aeec;
}.vjs-mouse-display .vjs-time-tooltip{padding-bottom: 6px;background-color: #26A69A;
}.video-js .vjs-play-progress .vjs-time-tooltip{display: none!important;
}
/*
.vjs-button > .vjs-icon-placeholder:before{ // 控制条所有图标,图标字体大小最好使用px单位,如果使用em,各浏览器表现可能会不大一样 font-size: 18px;line-height: 1.7;
}*/
</style><style>
.video-js .vjs-playback-rate .vjs-playback-rate-value {line-height: 2.4;font-size: 10px;padding: 4px ;
}/* 为菜单项添加上下间距 */
.video-js .vjs-playback-rate .vjs-menu-item-text {font-size: 10px;
} /* 鼠标离开时恢复透明度为1,字体颜色为蓝色 */
.video-js .vjs-playback-rate .vjs-menu-item.vjs-selected {opacity: 1;background-color: rgba(0, 0, 0, 0);color: #00aeec;
}/* 鼠标悬停时将文字设置为蓝色 */
.video-js .vjs-playback-rate .vjs-menu-item:hover .vjs-menu-item-text {/* color:#00aeec; */
}/* 鼠标悬停时和选中时候整体透明度减轻 */
.video-js .vjs-playback-rate .vjs-menu-item:hover,
.video-js .vjs-playback-rate .vjs-selected {opacity: 0.7;
}/* 隐藏垂直滚动条 */
.video-js .vjs-playback-rate .vjs-menu-content {overflow-y: hidden;
}/* 隐藏水平滚动条 */
.video-js .vjs-playback-rate .vjs-menu-content {overflow-x: hidden;
}</style> 

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

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

相关文章

c++ 函数内对象的释放

void someFunction() {MyClass obj MyClass(); }void someFunction() {MyClass obj new MyClass();}void someFunction() {MyClass* obj new MyClass(); }void someFunction() {std::unique_ptr<MyClass> obj std::make_unique<MyClass>(); }在函数中用这4种…

C++并发之条件变量(std::condition_variable)

目录 1 概述2 使用实例3 接口使用3.1 wait3.2 wait_for3.3 wait_until3.4 notify_one3.5 notiry_all3.5 notify_all_at_thread_exit1 概述 条件变量是一个能够阻塞调用线程直到被通知恢复的对象。   当调用其中一个等待函数时,它使用unique_lock(通过互斥锁)来锁定线程。线程…

hadoop和hbase对应版本关系

https://hbase.apache.org/book.html#configuration

DuDuTalk语音工牌:如何帮助房企打造数字化的案场接待体验

房地产案场接待作为客户体验的第一站&#xff0c;其服务质量直接影响客户的购房决策。然而&#xff0c;传统的案场接待方式存在诸多挑战&#xff0c;如信息记录不准确、服务流程难以标准化、客户反馈收集困难等。语音工牌作为一种创新的智能设备&#xff0c;凭借其独特的功能和…

Office 2021 mac/win版:智慧升级,办公新风尚

Office 2021是微软公司推出的一款高效、智能且功能丰富的办公软件套件。它集成了Word、Excel、PowerPoint等多个经典应用程序&#xff0c;旨在为用户提供更出色的办公体验。 Office 2021 mac/win版获取 Office 2021在继承了前代版本优点的基础上&#xff0c;进行了大量的优化…

接口测试之用Fiddler对手机app进行抓包

Fiddler是一款非常流行并且实用的http抓包工具&#xff0c;它的原理是在本机开启了一个http的代理服务器&#xff0c;然后它会转发所有的http请求和响应&#xff0c;因此&#xff0c;它比一般的firebug或者是chrome自带的抓包工具要好用的多。不仅如此&#xff0c;它还可以支持…

JVC摄像机SD卡变成RAW的恢复方法

JVC小日本胜利公司&#xff0c;公司名字绕口且产品线极广&#xff0c;涉及汽车、影音、娱乐……&#xff0c;而JVC在摄像机产品方面也有涉及&#xff0c;不过市场上极为少见。下边我们来看下这个JVC摄像机MP4恢复案例。 故障存储: 32G存储卡 RAW文件系统 故障现象: 客户无…

从零开始精通Onvif之事件处理

&#x1f4a1; 如果想阅读最新的文章&#xff0c;或者有技术问题需要交流和沟通&#xff0c;可搜索并关注微信公众号“希望睿智”。 概述 Onvif的事件处理允许IPC等摄像头主动向客户端&#xff08;比如&#xff1a;NVR、VMS、平台服务等&#xff09;推送事件通知&#xff0c;比…

浅谈Web开发的三大主流框架:Angular、React和Vue.js

在现代Web开发领域&#xff0c;Angular、React和Vue.js作为三大主流前端框架&#xff0c;各自拥有独特的特点和优势&#xff0c;为开发者提供丰富的选择。让我们更深入地了解这三大框架&#xff0c;并通过一些小型样例来展示它们的特性。 Angular Angular是一个完整的前端框架…

万字长文讲解如何快速搭建一个Spring Cloud项目

文章目录 概念基本概念微服务七大组件 初始化Maven父工程整合注册中心组件整合远程调用与负载均衡组件组件整合网关组件整合配置中心组件以gateway模块为例 整合分布式事务组件操作数据库模拟创建订单和扣减库存整合Seata 整合熔断降级组件整合链路追踪组件源码地址参考来源 概…

Python库

Python库 babel huey 图片视频处理 moviepy 一个用于视频编辑的Python模块,可用于进行视频的基本操作(如剪切、连接、标题插入)、视频合成(也称非线性编辑)、视频处理或创建高级效果 patchworklib 一个专注于图像拼接和合成的Python库 patchworklib 一个专注与图…

鸿蒙 如何将base64的图片保存到相册

把一个base64图片 保存到鸿蒙手机 相册中怎么实现呢&#xff1f; 下面有2中方法 方案一&#xff1a;可以通过安全控件「保存控件&#xff08;SaveButton&#xff09;」实现。该控件对应媒体库写入特权。应用集成保存控件后&#xff0c;用户点击该控件&#xff0c;应用会获取1…

CI/CD实战面试宝典:从构建到高可用性的全面解析

实战部署与配置 请描述你设计和实现的一个CI/CD pipeline的完整流程&#xff0c;包括构建、测试、部署各个阶段。 我设计的CI/CD pipeline通常包括以下几个阶段&#xff1a; 代码提交&#xff1a;开发人员将代码提交到Git仓库&#xff0c;触发CI/CD流程。代码检查&#xff1…

【区分vue2和vue3下的element UI Transfer 穿梭框组件,分别详细介绍属性,事件,方法如何使用,并举例】

Element UI 是为 Vue 2 设计的&#xff0c;而 Element Plus 是 Element UI 的 Vue 3 版本。在这两个版本中&#xff0c;Transfer 穿梭框组件&#xff08;如果有的话&#xff09;的 API 和使用方式可能会有所不同。以下是根据我对这两个版本组件的了解&#xff0c;对 Vue 2 的 E…

springcloud gateway转发websocket请求的404问题定位

一、问题 前端小程序通过springcloud gateway接入并访问后端的诸多微服务&#xff0c;几十个微服务相关功能均正常&#xff0c;只有小程序到后端推送服务的websocket连接建立不起来&#xff0c;使用whireshark抓包&#xff0c;发现在小程序通过 GET ws://192.168.6.100:8888/w…

持续总结中!2024年面试必问 20 道并发编程面试题(六)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道并发编程面试题&#xff08;五&#xff09;-CSDN博客 十一、什么是信号量&#xff08;Semaphore&#xff09;&#xff1f; 信号量是一种并发编程中使用的同步机制&#xff0c;用于控制对共享资源的访问。它…

Robot Operating System (ROS)中,发布与订阅

在Robot Operating System (ROS)中&#xff0c;发布与订阅是一种基于主题的异步消息传递机制&#xff0c;用于节点间的通信。ROS的设计是围绕着这一概念&#xff0c;它允许不同节点之间解耦&#xff0c;每个节点专注于自己的任务&#xff0c;通过发布和订阅消息来与其他节点交互…

计算机体系结构重点学习

从外部I/O与上层应用交互的整体软硬件过程 上层应用发出I/O请求&#xff1a;上层应用程序&#xff0c;如一个文本编辑器、网络浏览器或者任何软件应用&#xff0c;需要读取或写入数据时&#xff0c;会通过调用操作系统提供的API&#xff08;如文件操作API、网络操作API等&…

SpringBoot之请求映射原理

前言 我们发出的请求&#xff0c;SpringMVC是如何精准定位到那个Controller以及具体方法&#xff1f;其实这都是 HandlerMapping 发挥的作用&#xff0c;这篇博文我们以 RequestMappingHandlerMapping 为例并结合源码一步步进行分析。 定义HandlerMapping 默认 HandlerMappi…

赶紧收藏!2024 年最常见 20道并发编程面试题(五)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道并发编程面试题&#xff08;四&#xff09;-CSDN博客 九、什么是信号量&#xff08;Semaphores&#xff09;&#xff1f; 信号量&#xff08;Semaphores&#xff09;是一种用于控制多个线程或进程对共享资源访问…