前端展示m3u8视频

什么是m3u8视频？

m3u8是苹果公司推出的视频播放标准，是m3u的一种，只是编码格式采用的是UTF-8。

在vue框架项目中如何使用？（将展示m3u8视频的功能做成组件）

引入video.js

 <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.js"></script>

  <div :style="{ width: videoWidth, height: videoHeight }"><video:id="videoId"style="width: 100%; height: 100%"class="video-js"></video></div>

export default {props: {//视频地址、video的id值vData: {type: Object,default: () => {return {hlsurl: "", //视频url地址cameraId: "", //id};},},//视频宽度videoWidth: {type: String,default: "100%",},//视频高度videoHeight: {type: String,default: "100%",},},data() {return {options: {autoplay: true, // 设置自动播放muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）preload: "auto", // 预加载controls: true, // 显示播放的控件},player: null,videoId: "",};},methods: {getVideo(nowPlayVideoUrl, nowPlayVideoId) {this.player = videojs(nowPlayVideoId, this.options);// 关键代码， 动态设置src，才可实现换台操作//不动态设置依然也可以这样写this.player.src([{src: nowPlayVideoUrl,type: "application/x-mpegURL", // 告诉videojs,这是一个hls流},]);},},watch: {//监听视频地址、video的id值vData: {deep: true,immediate: true,handler(val) {this.videoId = val.cameraId;this.$nextTick(() => {this.getVideo(val.hlsurl, val.cameraId);});},},},beforeDestroy() {//  组件销毁时，清除播放器if (this.player) {this.player.dispose(); // 该方法会重置videojs的内部状态并移除dom}},};

前端展示m3u8视频相关推荐

video.js 视频直播前端展示
原理视频直播的流程原理图如下: 大致过程(摘自知乎:https://www.zhihu.com/question/37887655/answer/104444735): 流程如下: 1.数据采集: ...
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
[py]access日志入mysql-通过flask前端展示
目录 pymysql组装sql入库日志代码组织将入库的日志通过flask前端展示 pymysql组装sql入库日志 pymysql模块的用法采集这些指标(metirc)都是linux环境,会用到 ...
Linux视频切片m3u8,Rtmp转m3u8视频切片系统及方法
Rtmp转m3u8视频切片系统及方法 [技术领域] [0001]本发明涉及视频数据传输及播放技术领域,尤其涉及一种RTMP转M3U8视频切片系统及方法. [背景技术] [0002]传统的视频监控系统是 ...
Vue中video播放m3u8视频
1,安装依赖包 npm install --save xgplayer npm install --save xgplayer-hls 2,贴代码吧 <template><div&g ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
连续图片在前端播放为视频思路
背景 C++的同事先写好关于开始录制视频的native接口--startJniRecord Java思路 1.随便写个测试接口,将数据经过一定的清洗,通过webSocket发送给前端 @Operati ...
MySQL存储日志并使用Loganalyzer作为前端展示
MySQL存储日志并使用Loganalyzer作为前端展示为什么要使用日志在生产环境中我们可能需要一个较为完整的日志系统来查看运行中主机服务的状态和所作出的操作,我们可以在较大型的网络架构中使用E ...
实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现
文章目录概述代码结构 shoplist.html shoplist.js shoplist.css common.js添加解析日期的公共方法 FrontEndController添加路由联调测试 ...

前端展示m3u8视频

前端展示m3u8视频相关推荐

最新文章

热门文章