为volantis添加hls.js以在Chrome上播放m3u8视频
为volantis添加hls.js以在Chrome上播放m3u8视频
GOOPHER
发布于 2022-03-31 16:54:02
发布于 2022-03-31 16:54:02
文章被收录于专栏：GOOPHER的折腾记录
为volantis添加hls.js以在Chrome上播放m3u8视频
前言
按照上一篇文章 https://cloud.tencent.com/developer/article/1969883 所述，在md中插入视频要写很长一串，并且不支持主题的pjax，所以我就在想将主题原本的video标签改掉。
操作
在header.ejs中引入hls.js
打开themes/volantis/layout/_partial/header.ejs文件，在前添加：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>图示：
修改media.js
打开themes/volantis/scripts/tags/media.js文件，找到第十行：
return `<div class="video"><video controls preload><source src='${src}' type='video/mp4'>Your browser does not support the video tag.</video></div>`;将其修改为：
return `<div class="video"><video controls preload id="m3u8video"></video></div><script>var video = document.getElementById('m3u8video');if (Hls.isSupported()) { var hls = new Hls();hls.loadSource('${src}');hls.attachMedia(video); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = '${src}'; }</script>`;图示：
使用
在md中按照原来的video标签插入即可，示例：
{% video https://cdn.jsdelivr.net/gh/Goopher97/videoff/text/index.m3u8 %}hexo三连查看效果
博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021年4月1日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
