H265H264视频流播放

写在前面的话：

【对外承接app API开发、网站建设、系统开发，有偿提供帮助，联系方式于文章最下方】

关于H265格式视频的优势，网上百度一大堆，这里就不说了，关于H265播放的demo、代码也是一大堆，但做了之后才发现跟以前一样，处处都是坑，要么一大堆人都是引用的同一个人的，要么就是未经验证就直接转载，就连官网也给你挖坑，话不多说，直接上代码

方案一：

H264&h265播放（采用EasyPlayer JS组件）

 $(function () {var urlStr = null;var url = location.href;urlStr = url.substring(url.indexOf("videoaddress") + 13); if (urlStr != undefined && urlStr != null && urlStr != "") {CreateTabListVideo(urlStr);} else {alert("参数丢失");}})function GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]); return null;}function guid() {function S4() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);}return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());}var videoGuid = guid();  function CreateTabListVideo(videoUrl) {var htmlStr = "";var types = checkUrlType(videoUrl);if (types.flag && videoUrl.indexOf('elive.komect.com') > -1) {//265格式视频htmlStr += '<easy-player id="' + videoGuid + '" poster="" video-url="' + videoUrl + '" autoplay="true" live="true" alt ="无信号" show-custom-button="true"></easy-player>';$(".vedio-tab-list").append(htmlStr);} else {//264格式视频var htmlStr = "";htmlStr += '<video id="myPlayer" autoplay controls style="object-fit:fill;height: 100%;width: 100%;">';htmlStr += '    <source id="myPlayerSource" src="' + videoUrl + '" type="application/x-mpegURL" crossorigin="anonymous">';htmlStr += '</video>';$(".vedio-tab-list").append(htmlStr);var player = new EZUIPlayer('myPlayer');setTimeout(function () {document.getElementById("myPlayer").play();}, 1000);}}function checkUrlType(data) {var rgx = "((?!.m3u8).)*";var re = new RegExp(rgx);if (!re.test(data)) {if (data.indexOf(".html") <= 0) {return {flag: false,msg: "文件格式不正确！",};}else {return {flag: true,msg: "html",};}}else {var urlhz = GetHZ(data);return {flag: true,msg: urlhz,};}}//得到地址得后缀，function GetHZ(fileName) {var index1 = fileName.lastIndexOf(".");var index2 = fileName.length;var suffix = fileName.substring(index1 + 1, index2);return suffix;}

使用【EasyPlayer】JS组件播放的时候一定要注意要【添加资源文件】!!!!!

就是截图中的那个libDecoder.wasm文件，如果没有该文件，你的视频播放将会一直提示各种问题，如跨域、服务器拒绝，该文件放置在项目根目录即可，

gitHub下载地址：https://github.com/tsingsee/EasyPlayer.js

这就完了嘛？不，配置文件中还要做对应的配置修改

<staticContent><remove fileExtension=".woff" /><mimeMap fileExtension=".woff" mimeType="font/x-font-woff" /><remove fileExtension=".properties" /><mimeMap fileExtension=".properties" mimeType="text/plain" /><remove fileExtension=".appcache" /><remove fileExtension=".woff2" /><mimeMap fileExtension=".woff2" mimeType="font/x-font-woff" /><remove fileExtension=".json" /><mimeMap fileExtension=".json" mimeType="application/x-javascript" /><remove fileExtension=".mp4" /><mimeMap fileExtension=".mp4" mimeType="video/mp4" /><remove fileExtension=".wasm" /><mimeMap fileExtension=".wasm" mimeType="application/wasm" /><mimeMap fileExtension=".obj" mimeType="text/html" />
</staticContent>

再配上个截图：

兼容H265使用【EasyPlayer】js组件磕磕碰碰弄了一下午，才搞懂，怪我，自己心急没怎么去看文档以至于忘了添加【libDecoder.wasm】资源文件，也没发现添加资源文件之后还要修改配置文件才可以，于是导致我一直在死磕为什么一会儿js报跨域，一会儿报服务器拒绝。。。

如果做好之后，发现你的js报错，如跨域，服务器拒绝，

第一，检查你是否在项目根目录添加资源文件并修改配置文件

第二，检查你的视频地址是否过期，尤其是m3u8格式的监控视频地址，个人提议最好是在网上找一个不会过期的视频地址来测试

（以上两点，个人满满辛酸泪）

方案二：

使用【goldplay】组件进行播放（个人不怎么推荐，原因自己体会，反正能用，能用）

首先需要添加：

【goldplay-h265.css】&【goldplay-h265-sdk.js】

然后代码如下：


<!DOCTYPE html>
<html lang="en"><head><script  type="text/javascript" src="https://codesandbox.io/public/sse-hooks/sse-hooks.f648b14c15c640a14a557113a991cb8d.js"></script><script  type="text/javascript" src="https://codesandbox.io/static/js/banner.be879265d.js"></script><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Gold play online demo</title><link rel="stylesheet" href="./goldplay-h265.css" /><style>.play-container {width: 800px;height: 600px;/* background-color: #000; */margin: 20px 0 0 100px;float: left;}</style><script src="./goldplay-h265-sdk.js" charset="UTF-8"></script></head><body><div class="play-container"></div><script>let el = document.querySelector(".play-container");let options = {sourceURL: "https://omc3i.codesandbox.io/ts/playlist.m3u8",libPath: "https://omc3i.codesandbox.io/"};let player = new GoldPlay(el, options);</script><script crossorigin type="text/javascript" src="https://codesandbox.io/static/js/watermark-button.be960f43b.js"></script><script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"rayId":"6817f4120bdd9388","token":"7449176f14aa420c959831edd48bd5b7","version":"2021.8.1","si":10}'></script>
</body>
</html>

我给的其实就是官方的demo 这种方式唯一的好处就是适合刚毕业的小XS吧，直接引用js和css后就可以播放了，但如果想做一些个性设置的话不是很方便

GitHub地址：https://github.com/goldvideo/h265player

Demo地址：https://omc3i.codesandbox.io/

联系方式：

wechat&QQ&Tel：13501715983（如查不到请加QQ：631931078或352167311）

个人邮箱：13212644043@163.com

如有问题或改进地方请多多指点，本文为个人原创，转载请加以说明

H265H264视频流播放相关推荐

python编程实例视屏-python实现实时视频流播放代码实例
这篇文章主要介绍了python实现实时视频流播放代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 @action(methods=['GET' ...
python播放视频代码_python实现实时视频流播放代码实例
这篇文章主要介绍了python实现实时视频流播放代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 @action(methods=['GET' ...
Vue视频流播放器 Vue-Core-Video-Player
最近遇到点需求,领导要求能四宫格.九宫格的视频流播放器,还要能随意切换播放地址,一开始想用Vue-Video-Player解决问题的,但越用越不爽,试试别的~ Vue-Core-Video-Playe ...
在线视频流播放方法利弊；ffmpeg mp4 faststart；mp4 moov作用
1 四个在线视频播放方案第一个是RTSP(Real Time Streaming Protocol)实时流传输协议,是基于文本的多媒体播放控制协议,属于应用层.这里可能还会提到RTMP,这个其实就是 ...
java实现video标签视频流播放
java实现video标签视频流播放问题: 在遇到video标签播放后端视频源时问题.直接返回文件流的话 video需要将文件整个下载一次才会播放.这样如果小文件没有问题.如果文件大的话就比较恶心了 ...
EasyMovieTexture视频流播放错误问题
关于EasyMovieTexture视频流播放错误造成Unity卡顿或闪退问题解决博主在学习过程中遇到一个播放RTSP视频流的功能,于是遍览群书,查遍各大博客,终于皇天不负有心人,找到了两种实现方式 ...
NGINX-RTMP直播服务器搭建-OBS录制推流-VLC视频流播放
转载地址:https://blog.csdn.net/boonya/article/details/78663675 网上关于视频直播的资料还是挺多的,看了一些文章,自己也动手实践了下.主要有三个步骤 ...
使用flv.js实现flv格式的监控视频流播放
最近在对接海信的监控摄像头,对方返回的监控视频流格式是flv格式,我使用的是flv.js来实现监控播放一:flv.js github地址:https://github.com/Bilibili/fl ...
使用H5Stream实现rtsp视频流播放，在Vue项目中 (无插件、可多视频源播放、亲测可用)
本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流,从0到1的过程.包括WebSocket代理.h5ss.bat文件运行一会就自己卡死了.H5ss服务死掉自动定时重启的脚本等可 ...
VR虚拟现实大屏展示如何通过H265播放器EasyPlayerPro实现8K视频流播放？
VR正在改变我们生活.社交和工作方式.今天的消费者正在寻找体验,经过近几年的研究,我们知道VR有能力在未来的学习和发展中发挥巨大的作用.TSINGSEE青犀视频开发的EasyPlayerPro作为一款 ...

H265H264视频流播放

H265H264视频流播放相关推荐

最新文章

热门文章