z0y5sit

ZBlog 播放 dash_av1.mpd(DASH 协议 AV1 编码)视频完整方案

ZBlog11-sangbang.com
你的链接https://video.cdn.queniuqe.com/.../dash_av1.mpd?t=1772168377MPEG-DASH 流媒体清单文件(MPD),AV1 编码分片视频,HTML 原生 video、普通 DPlayer/CKplayer 默认不直接支持 mpd,所以直接粘贴地址会提示「不支持该文件类型」。ZBlog 有 3 种落地方案,按简易程度排序:

一、方案 1:自定义 HTML 代码嵌入(推荐,无需装插件,通用性最强)

依靠dash.js开源播放器解析 MPD、AV1 流,ZBlog 文章源码模式粘贴代码即可播放。

1. 文章插入代码(ZBlog 编辑→切换【源码】模式粘贴)

<!-- 引入dash.js CDN -->
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<!-- 播放器容器,自定义宽高 -->
<div style="width:100%;max-width:800px;margin:0 auto;">
<video id="dashVideo" controls style="width:100%;"></video>
</div>
<script>
//填入你的mpd完整链接
let mpdUrl = "https://video.cdn.queniuqe.com/store_trailers/3764200/651202934/e9ea4b8742f3903cdea0728a205aced255b47408/1771907887/dash_av1.mpd?t=1772168377";
const player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#dashVideo"), mpdUrl, false);
</script>
  • false= 关闭自动播放(浏览器限制自动播放,改成 true 部分设备失效);
  • 宽高:修改max-width:800px调整播放器尺寸。

2. 常见播放失败排查

  1. 跨域 CORS 报错(最常见):视频源 CDN(queniuqe.com)未开放跨域,浏览器拦截加载 MPD,解决:
    • 方案 A:服务器反向代理 MPD 地址(Nginx/Apache 转发,绕开跨域);
    • 方案 B:换 Shaka Player 备选 JS 库。
  2. AV1 解码不支持:Safari 旧版、部分手机浏览器不支持 AV1,Chrome/Firefox/Edge 全兼容 AV1。
  3. 链接时效:URL 末尾t=xxx是时效签名,过期会 404,需要更新有效 MPD 链接。

二、方案 2:ZBlog 安装 DPlayer 插件 + 扩展 dash 支持(适合批量插入)

ZBlog 应用中心安装 DPlayer 播放器(隔壁老李 / LY_DPlayer)(应用中心搜索:DPlayer),默认 DPlayer 只支持 mp4/m3u8,需手动引入 dash.js 扩展 DASH/MPD。

步骤

  1. ZBlog 后台→应用中心→安装 DPlayer 并启用;
  2. 主题页脚 / 头部模板(后台主题编辑)全局引入 dash.js:
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

文章简码插入(DPlayer 标签写法):

&#91;dplayer dash="https://xxx/dash_av1.mpd?t=xxx"&#93;

注:原版 DPlayer 无 dash 参数,需要手动修改插件 js 代码,新手优先方案 1。

三、方案 3:Shaka Player 替代 dash.js(兼容性更好,AV1 优化)

Google 开源 Shaka Player,对 AV1/DASH 适配优于 dash.js,替换上方代码的 JS 引入与初始化:

 

<pre><code>
<script src="https://cdn.jsdelivr.net/npm/shaka-player@4/dist/shaka-player.compiled.js"></script>
<div style="max-width:900px;margin:10px auto;">
<video id="myMpdVideo" controls width="100%"></video>
</div>
<script>
(async ()=>{
  const player = new shaka.Player(document.getElementById('myMpdVideo'));
  await player.load('https://video.cdn.queniuqe.com/store_trailers/3764200/651202934/e9ea4b8742f3903cdea0728a205aced255b47408/1771907887/dash_av1.mpd?t=1772168377');
})()
</script>
</code></pre>

QQ20260606095502-sangbang.com

四、补充关键知识点

  1. MPD 不是视频文件:只是 XML 索引,真正视频是远端碎片化 fMP4(AV1 编码),播放器通过 MPD 自动分片拉取、自适应切换清晰度;
  2. 无法播放根源:ZBlog 原生编辑器、常规播放器不内置 DASH 解析内核,必须前端 JS 库解析;
  3. 备选思路:如果源站支持转码,可把 DASH (MPD) 转成 M3U8 (HLS),直接用普通 DPlayer 简码[- dplayer url="xxx.m3u8" -]播放。

 

z0y5sit
0
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

在线客服
阿晨
我们将通过邮件尽快回复。
2026-06-07 02:14:26
有问题,请请点下面图标留言!
您的工单我们已经收到,我们将会通过邮件尽快跟您联系!
取消

选择聊天工具: