大家用iOS浏览器播放站里的纯音频文件控制条会直接消失吧, 貌似没聚聚提过这个问题唉, 下面用油猴脚本来修复Safari音频播放器控制条消失的问题

在上次的基础上加: 引用 7418999：(更新)iOS Safari下载视频教程

依然需要三个app, 快捷指令换成了Fileso, 它最近刚好在限免, 如何白嫖可参考: 引用 7504325：[iOS内购限免]Fileso：多功能文件管理, 速领! 11 月 14 日 08:00截止

今天主要讲如何操作Fileso, 操作Userscipts 可参考上面的下载视频教程帖

上期是通过快捷指令把js文件写入Userscipts目录, 有了Fileso之后就方便多了, 可以直接在Fileso里操作.js文件.

---

1. 打开Fileso app, 点右下角+号, 挂载文件夹



选择Userscripts的主目录, 点右上角打开



这样便挂载成功了



挂载之后就可以直接在Fileso里操作js文件了, 不用每次去自带文件app里找文件

---

2. 点进挂载的文件夹, 点右下角+号, 新建文件



输入文件名的名字随意, 后缀必须是.js, 创建

---

3. 点开刚新建的js文件, 复制粘贴如下代码, 手动在第一行==UserScript==前加//, 保存

複製代碼

1. ==UserScript==
2. // @name        草榴视频下载+音频修复
3. // @match        *://*/htm_mob/*.html
4. // @match        *://*/read.php*
5. // @version      1.2
6. // @description  草榴添加视频下载图标, 修复音频播放器
7. // @run-at      document-end
8. // @grant        none
9. // ==/UserScript==
11. (function() {
12. 'use strict';
14. // ------------------- 纯音频播放器修复 -------------------
15. function convertAudioVideo(v) {
16.     const sources = [
17.         v.getAttribute('data-src'),
18.         v.getAttribute('src')
19.     ].filter(Boolean);
21.     const audioSrc = sources.find(src =>
22.         /\.(?:mp3|wav|ogg|aac|flac|m4a)(?:[?#]|$)/i.test(src)
23.     );
25.     if (!audioSrc) return false;
27.     const audio = document.createElement('audio');
29.     audio.src = audioSrc;
30.     audio.controls = true;
31.     audio.preload = v.getAttribute('preload') || 'none';
32.     audio.loop = v.hasAttribute('loop');
33.     audio.style.cssText = 'width:100%;max-width:100%';
35.     v.replaceWith(audio);
36.     return audio;
37. }
39. // ------------------- 视频下载图标 -------------------
40. const addDownloadButton = (v, url) => {
41.     // 防止重复添加
42.     if (v.dataset.downloadAdded) return;
43.     if (!url || !/^https?:\/\/.*/i.test(url)) return;
45.     const a = document.createElement("a");
47.     // 直接指向视频地址
48.     // 保留 href，方便 iOS Safari 长按处理
49.     a.href = url;
50.     a.rel = "noopener";
51.     a.title = "下载视频";
52.     a.setAttribute("aria-label", "下载视频");
54.     // 禁止短按，只保留 Safari 原生长按菜单
55.     a.addEventListener("click", e => {
56.         e.preventDefault();
57.     });
59.     // Safari 风格的下载图标
60.     // pointer-events: none 让整个触摸区域都落在 <a> 上
61.     a.innerHTML = `
62.         <svg
63.             pointer-events="none"
64.             viewBox="0 0 24 24"
65.             width="20"
66.             height="20"
67.             fill="none"
68.             stroke="currentColor"
69.             stroke-width="2"
70.             stroke-linecap="round"
71.             stroke-linejoin="round"
72.             aria-hidden="true">
73.             <path d="M12 3v12"></path>
74.             <path d="m7 10 5 5 5-5"></path>
75.             <path d="M5 21h14"></path>
76.         </svg>
77.     `;
79.     // 下载图标放在播放器下方，居中
80.     a.style.display = "inline-flex";
81.     a.style.alignItems = "center";
82.     a.style.justifyContent = "center";
84.     // 实际可点击区域稍大，但视觉上仍只有一个小图标
85.     a.style.width = "32px";
86.     a.style.height = "32px";
88.     // 跟随当前页面文字颜色
89.     a.style.color = "inherit";
90.     a.style.textDecoration = "none";
92.     // 保留 Safari 原生长按行为
93.     a.style.webkitTouchCallout = "default";
94.     a.style.userSelect = "none";
96.     // 图标容器
97.     const wrap = document.createElement("div");
98.     wrap.style.display = "flex";
99.     wrap.style.justifyContent = "center";
100.     wrap.style.alignItems = "center";
101.     wrap.style.height = "32px";
102.     wrap.style.margin = "0";
103.     wrap.appendChild(a);
105.     // 放在播放器下方
106.     if (v.parentNode) {
107.         v.parentNode.insertBefore(wrap, v.nextSibling);
108.     }
110.     v.dataset.downloadAdded = "1";
111. };
113. // ------------------- 获取视频地址 -------------------
114. const getVideoURL = v => {
115.     const realSrc =
116.         v.getAttribute('data-src') ||
117.         v.getAttribute('src') ||
118.         v.currentSrc;
120.     if (!realSrc || realSrc.startsWith('data:')) {
121.         return null;
122.     }
124.     return realSrc;
125. };
127. // ------------------- 统一处理视频和音频 -------------------
128. const processVideo = v => {
129.     // 先尝试转换音频
130.     const audio = convertAudioVideo(v);
132.     if (audio) {
133.         addDownloadButton(audio, audio.src);
134.         return;
135.     }
137.     // 普通视频添加下载图标
138.     const realSrc = getVideoURL(v);
139.     if (realSrc) {
140.         addDownloadButton(v, realSrc);
141.     }
142. };
144. // ------------------- 初始化已有视频 -------------------
145. document.querySelectorAll("video").forEach(processVideo);
147. // ------------------- 动态新增视频节点 -------------------
148. new MutationObserver(ms => {
149.     ms.forEach(m => {
150.         m.addedNodes.forEach(n => {
151.             if (n.tagName === "VIDEO") {
152.                 processVideo(n);
153.             }
155.             if (n.querySelectorAll) {
156.                 n.querySelectorAll("video").forEach(processVideo);
157.             }
158.         });
159.     });
160. }).observe(document.documentElement, {
161.     childList: true,
162.     subtree: true
163. });
165. })();

複製代碼

---

4. 访问 引用 7505732：分享一个漂流瓶认识的少妇和她老公的录音（17.06.04）⑥

看下页面底部的音频播放器控制条是否变了, 没变的话去扩展里看下是否有这条js: 草榴视频下载+音频修复

Fileso 挂载 Userscripts 目录这一步写得最清楚，iOS 上油猴脚本能这么用，纯音频转 audio 播放器这个思路确实省事。

感谢分享技术

感谢分享

感谢分享

感谢分享

谢谢分享

感谢分享

感謝分享，學到不少