PC端播放H265

说明

需要在PC端浏览器(Chrome)中播放直播视频，视频格式有H264/H265。有不少三方库可以实现。

通过video.js(支持H264，不支持H265)

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8/>
    <title>videojs-contrib-hls embed</title>

    <link href="https://unpkg.com/video.js@5.16.0/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js@5.16.0/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls@4.1.1/dist/videojs-contrib-hls.js"></script>

</head>
<body>
<h1>Video.js Example Embed</h1>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
       data-setup='{}'>
    <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL">
</video>

</body>
</html>

参考地址：

https://github.com/videojs/vi...

https://videojs.com/getting-s...

通过hls.js(支持H264，不支持H265)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>pc play m3u8(hlsjs)</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
    <style>
        video {
            width: 600px;
            height: auto;
        }
    </style>
</head>
<body>
<h1>pc play m3u8(hlsjs)</h1>
<video id="video" controls="controls" autoplay="autoplay" muted></video>
</body>
<script>
    var video = document.getElementById('video');
    var videoSrc = 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8';
    if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    }
    // hls.js is not supported on platforms that do not have Media Source
    // Extensions (MSE) enabled.
    //
    // When the browser has built-in HLS support (check using `canPlayType`),
    // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
    // element through the `src` property. This is using the built-in support
    // of the plain video element, without using hls.js.
    //
    // Note: it would be more normal to wait on the 'canplay' event below however
    // on Safari (where you are most likely to find built-in HLS support) the
    // video.src URL must be on the user-driven white-list before a 'canplay'
    // event will be emitted; the last video event that can be reliably
    // listened-for when the URL is not on the white-list is 'loadedmetadata'.
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = videoSrc;
        video.addEventListener('loadedmetadata', function () {
            video.play();
        });
    }
</script>
</html>

参考地址：

https://github.com/video-dev/...

通过EasyWasmPlayer(支持H264，也支持H265)

普通页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyWasmPlayer</title>
    <script src="./EasyWasmPlayer.js"></script>
</head>

<body>
<h4 style="width:600px;margin: auto;">H265播放器</h4>
<br>
<div style="width:600px;height: 400px; background-color:pink;margin: auto;">
    <div id="newplay" onClick="onplay"></div>
    <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank">
        在线演示</a></p>
    <p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a
            href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>
    <input type="text" id="value">
    <button id="btn">播放</button>
</div>
<script>
    // 播放器回调函数
    callbackfun = function (e) {
        console.log(e);
    }
    // 播放按钮
    var btn = document.getElementById('btn');
    // 地址栏
    var value = document.getElementById('value');
    // 实例播放器
    var player = new WasmPlayer(null, 'newplay', callbackfun, {
        Height: true
    })
    //播放事件 传入地址播放
    btn.onclick = function () {
        player.play(value.value, 1);
        console.log(value.value);
    }

</script>
</body>
</html>

define/require页面：

define([
    "../lib/EasyWasmPlayer.js"
], function (EasyWasmPlayer) {
    var MainView = {
        // ...

        afterRender: function () {
            var that = this;

            // 播放器回调函数，播放、暂停、全屏等会回调
            var callbackfun = function (e) {
                console.log(e);
            };

            // 地址栏
            var value = document.getElementById('value');
            // 实例播放器，注意这里为EasyWasmPlayer，不是WasmPlayer
            var player = new EasyWasmPlayer(null, 'newplay', callbackfun, {
                Height: true
            });

            // 播放按钮
            var btn = document.getElementById('btn');

            //播放事件 传入地址播放
            btn.onclick = function () {
                player.play(value.value, 1);
                console.log(value.value);
            }
        },

    };

    // ...
});

注意：

new WasmPlayer要改为new EasyWasmPlayer。
地址用相对地址"../lib/EasyWasmPlayer.js"，不用"xx/yy/zz/videoplay/lib/EasyWasmPlayer.js"

参考：

https://github.com/tsingsee/E...

注意：要使得EasyPlayer支持h265格式，需要将文件发布到http服务器上，如nginx。将ccc.html,EasyWasmPlayer.js,libDecoder.wasm放入$NGINX_HOME/html下，然后配置：

server {
    listen       7078;
    charset utf-8;
    proxy_connect_timeout 180;
    proxy_send_timeout 180;
    proxy_read_timeout 180;
    
    location / {
      root html;
      index ccc.html;
    }
}

这里监听端口为7078，访问地址：http://localhost:7078/

root html 表示根目录为$NGINX_HOME/html

index ccc.html; 表示默认访问页为：ccc.html

采用EasyPlayer播放H265中遇到的问题（H264无问题）

tomcat部署，播放H265

将ccc.html,EasyWasmPlayer.js,libDecoder.wasm三个文件放入$TOMCAT_HOME/webapps/examples下，然后http://localhost:8080/examples/ccc.html访问，播放H265视频，报错：

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 68 74 6d @+0) at Error
    at WA (blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:15306)
    at PA (blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:15458)
    at FA (blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:13489)
    at blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:14589
    at FA (blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:13494)
    at blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:14589

将文件部署到nginx的html下，问题解决。但为何在tomcat上报错呢？

分析
tomcat部署时出现CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 68 74 6d @+0)的原因，通过浏览器Network查看，发现libDecoder.wasm 404错误，说明是未找到libDecoder.wasm导致。
通过nginx将/libDecoder.wasm重定向后，问题可解决。如：

location /libDecoder.wasm {
  proxy_pass http://xxxx/lib/libDecoder.wasm;
  proxy_set_header Host $host:$server_port;
  proxy_set_header X-Real-Ip $remote_addr;
}

这里xxxx/lib/用实际地址。

或者修改EasyWasmPlayer.js中libDecoder.wasm的路径。EasyWasmPlayer.js中搜索'libDecoder.wasm'，改为：

GA=T+"xxx/yyy/libDecoder.wasm";

这里xxx/yyy以实际地址替换。

如果通过springboot启动，可能不会报404错误，只报CompileError: WebAssembly.instantiate():。同样方式解决。

WasmPlayer is not defined

将文件EasyWasmPlayer.js,libDecoder.wasm拷贝到指定目录下。播放，报错：

Uncaught ReferenceError: WasmPlayer is not defined

new WasmPlayer改为new EasyWasmPlayer即可。这里EasyWasmPlayer为文件头部define语句对应的实例。

要解决这个问题，也可以通过另一种变通的方法（不建议）：

因为提示not defined，表示.js文件引的有问题或者用的时候上下文有问题。而不在前端框架中使用时，一点问题没有。
通过查看网页html，发现EasyWasmPlayer.js的引入语句为：

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="xxx/yyy/videoplay/lib/EasyWasmPlayer.js" src="xxx/yyy/videoplay/lib/EasyWasmPlayer.js"></script>

而不是：

<script type="text/javascript" src="xxx/yyy/videoplay/lib/EasyWasmPlayer.js"></script>

在html中，找一个无关紧要的<script>，有：

<script type="text/javascript" src="frm/portal/system.min.js"></script>

我们通过nginx，将该文件的引用替换为EasyWasmPlayer.js的引入。

location /portal/frm/portal/system.min.js {
    proxy_pass http://localhost:7072/portal/xxx/yyy/videoplay/lib/EasyWasmPlayer.js;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-Ip $remote_addr;
}

重启nginx后，问题解决。

EasyPlayer的其它说明

libDecoder.wasm文件需要，且路径能访问到
EasyWasmPlayer.js不用放在根目录，能成功引入就行

PC端播放H265

说明

通过video.js(支持H264，不支持H265)

通过hls.js(支持H264，不支持H265)

通过EasyWasmPlayer(支持H264，也支持H265)

采用EasyPlayer播放H265中遇到的问题（H264无问题）

tomcat部署，播放H265

WasmPlayer is not defined

EasyPlayer的其它说明

anh6

引用和评论

浏览器跨域等问题

Vue.js-Vue实例

Flex 布局学习总结（对齐方式）

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

你可能不知道的图片加载相关知识

巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

Base64编码的“暗坑”：解密失败？可能是这些原因！