想在文章中插入视频,尝试 iframe
和 video
标签发现 m3u8
流会直接下载无法播放,用 hls
解决播放问题后,碰到了 403 forbbiden
。联想到前些天新浪图床加 referrer
验证的解决方法,随手一试竟然可以。后来发现 Mixed Content
和 CORS
才是大坑,几经了解,这两问题只能靠视频源服务器解决,所以视频源在自己服务器上是不会有问题的,当然浏览器装个插件也能看,但不可能让所有浏览博客的朋友都装插件。最后为了给视频添加封面,找到了 DPlayer
这个神器,添加后使用体验良好。
引入 JS 和 CSS
在 head
中添加以下代码,可通过主题设置添加,也可直接加入到主题对应的 header.php
中。
- <link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
- <script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
- <script src="https://cdn.bootcss.com/hls.js/0.12.4/hls.min.js"></script>
- <script>
- function __create__dps(videos) {
- for (i = 0; i < videos.length; i++) {
- new DPlayer({
- container: document.getElementById('__dp' + i),
- screenshot: true,
- video: {
- url: videos[i]
- }
- });
- }
- // 修正 Mirages 1.7.10 视频比例错误
- setTimeout(() => {
- let __elementList = document.querySelectorAll('.video-container.video-4-3');
- for (let __element of __elementList) {
- __element.className = 'video-container video-16-9';
- __element.setAttribute('style', 'position: initial;');
- }
- }, 300);
- }
- </script>
添加播放器
在文章所需位置以 html 形式插入以下代码,即可批量添加播放器。
- <div id="__dp0"></div>
- <div id="__dp1"></div>
- <script>
- let __videos = [
- 'demo0.mp4',
- 'demo1.mp4'
- ];
- __create__dps(__videos);
- </script>
转载自:acglt.com