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视频流播放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [css] 用CSS绘制一个三角形
- 下一篇： [html] 如何给table中的某一