H265&H264视频流播放

 写在前面的话：

        【对外承接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

                 

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