前端实现H265编码的m3u8视频流播放

前言

视频监控是智慧城市、智慧园区等WebGIS类系统中最为常见的硬件对接设备,最常用的监控视频流格式为m3u8格式,但是m3u8格式通常都是h.265编码格式的,我搜遍了几乎所有前端视频播放插件,几乎普通的播放器插件都不支持h.265格式的视频编码。本文就带领大家了解H265视频编码,并实现前端播放H265编码的视频。

1. 什么是H.265编码?

目前很多摄像机采用了H.265的编码标准,H.264编码的摄像机逐渐减少,为什么H.265会流行?H.264和H.265有何不同?

H.265是ITU-TVCEG继H.264之后所制定的新的视频编码标准。H.265标准围绕着现有的视频编码标准H.264,保留原来的某些技术,同时对一些相关的技术加以改进。新技术使用先进的技术用以改善码流、编码质量、延时和算法复杂度之间的关系,达到最优化设置。具体的研究内容包括:提高压缩效率、提高鲁棒性和错误恢复能力、减少实时的时延、减少信道获取时间和随机接入时延、降低复杂度等。H264由于算法优化,可以低于1Mbps的速度实现标清数字图像传送;H265则可以实现利用1~2Mbps的传输速度传送720P(分辨率1280*720)普通高清音视频传送。

H.265旨在在有限带宽下传输更高质量的网络视频,仅需原先的一半带宽即可播放相同质量的视频。这也意味着,我们的智能手机、平板机等移动设备将能够直接在线播放1080p的全高清视频。H.265标准也同时支持4K(4096×2160)和8K(8192×4320)超高清视频。可以说,H.265标准让网络视频跟上了显示屏“高分辨率化”的脚步。 

H.265虽然有点有很多,但是也有最大劣势。因为大佬级别公司神仙打架凡人遭殃,h265编码的视频不能直接在电脑端浏览器播放(部分电脑端的播放器软件支持播放),手机端(主要是安卓和苹果)是可以在浏览器直接播放的。所以,如果要使用h265编码的视频,你的浏览器端客户只能限制在手机端,电脑端浏览器用户考虑其他方案。

2. 解决Web端播放H265的方法

1. 第一种就是使用ffmpeg(FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案)进行转码,这种方案可能比较稳定,但是成本较高,而且实现比较复杂。

2. 使用前端视频播放插件,我在开发过程中尝试了很多很多前端的视频插件,都无法播放H265编码的视频。终于发现了这个开源免费的前端播放插件EasyPlayer.js。它通过和webassembly结合,实现了web端支持H265视频的播放,使用起来也很简单,GitHub开源地址:

GitHub - tsingsee/EasyPlayer.js: EasyPlayer.js H5播放器,是一款免费的能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)直播与点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、asm、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTP/RTMP/HTTP-FLV/HLS(m3u8) live streaming & vod streaming,support H.264/H.265/AAC video & audio codec,support mse/asm/wasm decode mode,support Windows/Linux/Android/iOS platform,EasyPlayer.js uses leading-edge technology.EasyPlayer.js H5播放器,是一款免费的能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)直播与点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、asm、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTP/RTMP/HTTP-FLV/HLS(m3u8) live streaming & vod streaming,support H.264/H.265/AAC video & audio codec,support mse/asm/wasm decode mode,support Windows/Linux/Android/iOS platform,EasyPlayer.js uses leading-edge technology. - GitHub - tsingsee/EasyPlayer.js: EasyPlayer.js H5播放器,是一款免费的能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)直播与点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、asm、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTP/RTMP/HTTP-FLV/HLS(m3u8) live streaming & vod streaming,support H.264/H.265/AAC video & audio codec,support mse/asm/wasm decode mode,support Windows/Linux/Android/iOS platform,EasyPlayer.js uses leading-edge technology.icon-default.png?t=N7T8https://github.com/tsingsee/EasyPlayer.js

EasyPlayer.js简介:EasyPlayer.js H5播放器,是一款免费的能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)直播与点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、asm、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。 

3. 使用EsayPlayer.js实现前端播放H.265编码的视频流

1. Vue2项目安装EasyPlayer视频播放插件
  npm install @easydarwin/easyplayer --save
 2. 解压后根据说明文档将文件移动到指定位置

(1)node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 移动到 静态文件 根目录

(2)node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 移动到 静态文件 根目录

(3)node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 移动到 静态文件 根目录

(4)特别注意:播放H.265视频需要将:node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录

3. 在项目中引入和使用H5视频播放插件

(1)在index.html文件中引入EasyPlayer-lib.min.js

<script src="./EasyPlayer-lib.min.js"></script>

(2)在组件中使用EasyPlayer播放插件

<template><div class="monitor-container"><div class="monitor-list-container"><div class="monitor-list-title">费县视频监控</div><div class="monitor-list-scroll-container"><div class="monitor-class-name" @click="monitorShow = !monitorShow"><i class="el-icon el-icon-s-grid"></i>费县森林防火视频监控({{ monitorList.length }})<i class="el-icon  el-icon-arrow-down" style="float:right;margin-top:16px;"></i></div><div v-show="monitorShow"><div class="monitor-item" v-for="(item,index) in monitorList" :key="index" ><i class="el-icon el-icon-video-camera"></i>{{ item.cameraname }}</div></div><div class="monitor-class-name" @click="monitor2Show = !monitor2Show"><i class="el-icon el-icon-s-grid"></i>市应急指挥视频监控({{ monitorList2.length }})<i class="el-icon  el-icon-arrow-down" style="float:right;margin-top:16px;"></i></div><div  v-show="monitor2Show"><div class="monitor-item" v-for="(item,index) in monitorList2" :key="index" @click="playVideo(item,index)"><i class="el-icon el-icon-video-camera"></i>{{ item.jkdmckjg }}</div></div></div></div><div class="video-container"><div class="layout-container"></div><EasyPlayerv-for="(item,index) in playArrays" :key="index"style="width:450px;height:250px;float:left;margin-right:15px;margin-bottom:15px;":videoUrl="item":aspect="aspect"live@message="$message":fluent="fluent":autoplay="true"stretch></EasyPlayer></div></div>
</template><script>
import EasyPlayer from '@easydarwin/easyplayer'
import axios  from 'axios';
import { getMethodCommon } from '../../../api/common';import 'video.js/dist/video-js.css'
import videojs from "video.js";
import "videojs-contrib-hls";export default{components:{EasyPlayer},data(){return {videoUrl:"",aspect:"16:9",fluent:true,playArrays:[],monitorShow:false,monitor2Show:true,monitorList:[],monitorList2:[],player:null,}},created(){this.getHKmonitorlist();this.getYJmonitorlist();}, mounted() {let _this = this;setTimeout(()=>{},5000)},methods:{getVideo() {videojs("myvideo",{bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: true},function() {this.play();});},playVideo(item,index){if(this.playArrays.find((it,idx)=>{return it == "http://***.***.***.***/live/"+item.jkdgbidzlkjg+".m3u8"})){this.$message({type:"error",message:"已经添加至播放列表"})return;}if(this.playArrays.length>=4){this.playArrays.shift();}this.playArrays.push("http://***.***.***.***:7012/live/"+item.jkdgbidzlkjg+".m3u8")},// 获取海康监控列表getHKmonitorlist(){axios({method:"get",url:"http://***.***.***.***:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Amonitornest&maxFeatures=10000&outputFormat=application%2Fjson",}).then(res=>{res.data.features.forEach((item,index)=>{let obj = item.properties;this.monitorList.push(obj);if(index<=3){this.playArrays.push("http://***.***.***.***:7012/live/"+item.jkdgbidzlkjg+".m3u8")}})})},// 市应急局监控设备getYJmonitorlist(){getMethodCommon("/YingJiJu/LoadCameraInfo?county=费县&pageIndex=1&pageSize=999").then(res=>{if(res.code ==  200){this.monitorList2 = res.data;}})},}
}
</script><style scoped>.monitor-container{width:100%;height:100%;background:#30645eaa;padding:15px;background-image: url(/img/biaohui.png);background-size:100% 100%;
}.monitor-list-container{width:240px;height:100%;float:left;
}.monitor-list-title{width:100%;height:60px;font-size:20px;text-indent:15px;color:#fff;cursor:pointer;
}.monitor-list-scroll-container{width: calc( 100% - 12px);height: calc(100% - 60px);overflow-y: auto;padding-right:12px;
}.monitor-class-name{width:100%;height:42px;line-height:42px;color:#fff;
}
.monitor-item{width:100%;height:24px;line-height:24px;color:#cfcfcf;font-size:12px;text-indent: 4px;overflow: hidden;cursor: pointer;
}
.monitor-item:hover{background:#30645e;
}.video-container{width: calc( 100% - 240px);float:right;height:100%;
}.layout-container{width:100%;height:50px;
}::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {border: 0;
}::-webkit-scrollbar {height: 10px;width: 10px;background: transparent;border-radius: 5px;
}::-webkit-scrollbar-thumb {padding-top: 100px;-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);background-color: rgba(0, 0, 0, 0.4);min-height: 28px;border-radius: 4px;background-clip: padding-box;
}::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {border: 0;
}::-webkit-scrollbar-thumb:hover {-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),inset -1px -1px 0 rgba(0, 0, 0, 0.07);background-color: #797979;
}::-webkit-scrollbar-thumb:active {-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);background-color: rgba(0, 0, 0, 0.5);
}
</style>

项目截图:

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

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

相关文章

Spring Boot整合MyBatis-Plus框架快速上手

最开始&#xff0c;我们要在Java中使用数据库时&#xff0c;需要使用JDBC&#xff0c;创建Connection、ResultSet等&#xff0c;然后我们又对JDBC的操作进行了封装&#xff0c;创建了许多类似于DBUtil等工具类。再慢慢的&#xff0c;出现了一系列持久层的框架&#xff1a;Hiber…

记一次接口交互is开头的属性序列化后“is”丢失问题

问题背景&#xff1a; 今天在做项目联调时调用别人的第三方接口时&#xff0c;发现字段传递不对导致参数传递异常的问题&#xff0c;当时还很奇怪&#xff0c;明白传好着呢&#xff0c;怎么就好端端的出现字段不对的情况呢&#xff1f; 查看发现该字段为boolean类型的isIsRef…

第39节: Vue3 表单输入绑定及修饰符

在UniApp中使用Vue3框架时&#xff0c;你可以使用表单输入绑定来将用户输入与组件的数据进行绑定。以下是一个示例&#xff0c;演示了如何在UniApp中使用Vue3框架使用表单输入绑定&#xff1a; <template> <view> <input v-model"message" type&qu…

内网离线搭建之----kafka集群

1.系统版本 虚拟机192.168.9.184 虚拟机192.168.9.185 虚拟机192.168.9.186系统 centos7 7.6.1810 2.依赖下载 ps&#xff1a;置顶资源里已经下载好了&#xff0c;直接用&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;…

Linux下安装MySQL

Linux下安装MySQL 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/5.7.html#downloads 解压 tar -xvf mysql-5.7.26-linux-glibc2.12-x86_64.tar 再移动并重命名一下 mv mysql-5.7.26-linux-glibc2.12-x86_64 /usr/local/mysql创建mysql用户组和用户并修改权限…

【回溯】符号三角形问题Python实现

文章目录 [toc]问题描述回溯法时间复杂性Python实现 个人主页&#xff1a;丷从心 系列专栏&#xff1a;回溯法 问题描述 下图是由 14 14 14个“ ”和 14 14 14个“ − - −”组成的符号三角形&#xff0c; 2 2 2个同号下面都是” “&#xff0c; 2 2 2个异号下面都是“ −…

QT编译并部署QtMqtt相关环境+跑测demo【超详细教程】

文章目录 概要整体架构流程▷下载指定版本的QMqtt源码&#xff1a;▷编译后同步MQTT相关文件&#xff1a; 技术名词解释技术实现步骤详解一、编译源码1、编译报错2、解决思路3、编译通过 二、继续完善mqtt应用环境1、打开编译生成的shadow build文件夹2、同步lib3、同步bin4、同…

KafkaLog4jAppender

Apache Log4j 中有一个 Appender 概念&#xff0c;它负责将日志信息输出到各种目的地&#xff0c;例如控制台、文件、数据库等。KafkaLog4jAppender 是 Log4j 的一个扩展&#xff0c;它可以将日志信息发送到 Apache Kafka。 下面是如何在 Log4j 中使用 KafkaLog4jAppender 的一…

【Git-IDEA】在 IDEA 中使用 Git(clone、pull、push、merge、建立本地分支与远程分支的连接)

【Git-IDEA】在 IDEA 中使用 Git&#xff08;clone、pull、push、merge、建立本地分支与远程分支的连接&#xff09; 1&#xff09;Gitee2&#xff09;配置 Git3&#xff09;初始化本地仓库4&#xff09;连接远程仓库5&#xff09;clone5.1.方式一5.2.方式二 6&#xff09;分支…

react常用Hooks

Hooks是可从函数组件“挂钩”到React状态和生命周期功能的函数。 Hooks在class中是无效的——可在没有class的情况下使用React。&#xff08;不推荐重写已有组件&#xff0c;但是如果愿意&#xff0c;可以在一些新的组件中使用 Hooks。&#xff09;React提供一些内置的 Hooks&a…

5G NR无线蜂窝系统的信道估计器设计

文章目录 DMRS简介DMRS类型DMRS频域密度 信道估计实验仿真实验参数实验实验结论 DMRS简介 DMRS类型 类型A&#xff1a;DMRS位于时隙的第二个或第三个OFDM符号&#xff0c;由14个OFDM符号组成&#xff0c;当数据占据大部分时隙时使用A型映射。 类型B&#xff1a;用在URLLC中&a…

鸿蒙系列--组件介绍之其他基础组件(上)

上回介绍了基础组件中最常用的组件常用的基础组件&#xff0c;接下来还有其他基础组件 一、Blank 描述&#xff1a;空白填充组件 功能&#xff1a;在容器主轴方向上&#xff0c;具有自动填充容器空余部分的能力。只有当父组件为Row/Column时生效 子组件&#xff1a;无 Blan…

Spring之提前编译:AOT

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

【Android 13】使用Android Studio调试系统应用之Settings移植(五):ActionButtonsPreference和Utils

文章目录 一、篇头二、系列文章2.1 Android 13 系列文章2.2 Android 9 系列文章2.3 Android 11 系列文章三、剩余子模块的创建四、逐个完成AS移植五、ActionButtonsPreference5.1 依赖分析:ActionButtonsPreference的Android.bp5.2 依赖分析:Utils的Android.bp5.3 Utils编译错…

Linux系统--账号和权限管理

目录 一 用户账号与组账号 ①Linux中每个用户账号是通过 UID来唯一标识的 账户类型UID号描述特点超级管理员0权限受到限制的用户程序用户 1-499 &#xff08;CentOS 6以前&#xff09; 1-999 &#xff08;CentOS 7以后&#xff09; 不登录的用户&#xff0c;系统默认的情况拥…

【Java进阶篇】深拷贝和浅拷贝的理解(保姆级文献)

✔️深拷贝和浅拷贝的理解 在计算机内存中&#xff0c;每个对象都有一个地址&#xff0c;这个地址指向对象在内存中存储的位置。当我们使用变量引用一个对象时&#xff0c;实际上是将该对象的地址赋值给变量。因此&#xff0c;如果我们将一个对象复制到另一个变量中&#xff0c…

一台服务器​最大并发 tcp 连接数多少?65535?

首先&#xff0c;问题中描述的65535个连接指的是客户端连接数的限制。 在tcp应用中&#xff0c;server事先在某个固定端口监听&#xff0c;client主动发起连接&#xff0c;经过三次握手后建立tcp连接。那么对单机&#xff0c;其最大并发tcp连接数是多少呢&#xff1f; 如何标…

Selenium4自动化测试框架

Selenium 介绍 Selenium 是目前用的最广泛的 Web UI 自动化测试框架&#xff0c;核心功能就是可以在多个浏览器上进行自动化测试&#xff0c;支持多种编程语言&#xff0c;目前已经被 google&#xff0c;百度&#xff0c;腾讯等公司广泛使用。 开发步骤 1、配置 google 驱动…

机械革命极光Pro重装Win10系统图解

机械革命极光Pro是性能优秀的笔记本电脑&#xff0c;深受广大用户的喜欢&#xff0c;现在用户想给笔记本电脑重新安装一下操作系统&#xff0c;但不知道重装系统的详细步骤。下面小编将带来机械革命极光Pro笔记本电脑重装系统Win10版本的步骤介绍&#xff0c;帮助更多的用户完成…

Elasticsearch:无需搜索 “Christmas” 即可找到有关圣诞节的书籍

随着假期的临近&#xff0c;我期待着变得舒适&#xff0c;拿起一本新书&#xff0c;享受轻松的时光。 但是使用搜索栏在线发现图书并不像看起来那么容易......大多数零售搜索引擎仅依赖于关键字搜索&#xff0c;当我们确切地知道我们正在寻找什么书名时&#xff0c;这很好&…