【已解决】CF Workers代理视频后不能拖动播放-lixiaofei

root

3年前

Rate this post

感谢各位大佬，在workers加了下面的代码就好了。奇怪的是昨晚我试过了，不行，今天再试试就可以了。可能是忘记清缓存了

----------------------------------

用CF Workers代理了B2中存储的视频，可以播放，但是进度条不能拖拽，只要一拖拽就回到了原来的位置。

但是打开CF的开发模式，就可以正常拖拽播放了。

下面分别是开发模式开、关状态下的请求视频返回信息的header

这个是打开开发模式

这个是关闭开发模式

比对了一下，【开发模式】关闭模式下，返回的header中没有 accept-ranges: bytes，把缓存级别设置成bypass也没有。

筒子们有办法解决吗？

也不是做视频站，就自己平时用用，流量也不会太大。

CF Wrokers代码，网上找的，自己简单改了一下

const b2UrlPath = `/file/${b2Bucket}/`;
addEventListener('fetch', event => {
return event.respondWith(fileReq(event));
});

// define the file extensions we wish to add basic access control headers to
const corsFileTypes = ['png', 'jpg', 'gif', 'jpeg', 'webp'];

// backblaze returns some additional headers that are useful for debugging, but unnecessary in production. We can remove these to save some size
const removeHeaders = [
'x-bz-content-sha1',
'x-bz-file-id',
'x-bz-file-name',
'x-bz-info-src_last_modified_millis',
'X-Bz-Upload-Timestamp',
'Expires'
];
const expiration = 31536000; // override browser cache for images - 1 year

// define a function we can re-use to fix headers
const fixHeaders = function(url, status, headers){

newHdrs.set('access-control-allow-credentials', 'true');
newHdrs.set('access-control-allow-headers', '*');
newHdrs.set('access-control-allow-methods', '*');
newHdrs.set('access-control-allow-origin', '*');

// set ETag for efficient caching where possible
const ETag = newHdrs.get('x-bz-content-sha1') || newHdrs.get('x-bz-info-src_last_modified_millis') || newHdrs.get('x-bz-file-id');
if(ETag){
newHdrs.set('ETag', ETag);
}
// remove unnecessary headers
removeHeaders.forEach(header => {
newHdrs.delete(header);
});
return newHdrs;
};
async function fileReq(event){

const cache = caches.default;

let request = await event.request.clone()
const url = new URL(request.url);
url.host = b2Domain

const newreq = new Request(url.toString(), request)

let response = await cache.match(newreq); // try to find match for this request in the edge cache
if(response){
// use cache found on Cloudflare edge. Set X-Worker-Cache header for helpful debug
let newHdrs = fixHeaders(url, response.status, response.headers);
newHdrs.set('X-Worker-Cache', "true");
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHdrs
});
}

// no cache, fetch image, apply Cloudflare lossless compression

response = await fetch(newreq);
let newHdrs = fixHeaders(url, response.status, response.headers);
response = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHdrs
});

event.waitUntil(cache.put(newreq, response.clone()));
return response;
}

热议
推荐楼 alog148 1小时前

cf的 TOS 写了禁止用免费版cf缓存大量非HTML内容（包括视频）

推荐楼 chxin 2小时前

代理没有传递range。加上就好

2楼 allnetstore 2小时前

3G的文件，你指望CF帮你缓存？

4楼 yaoruisheng 2小时前

代理没有传递range。加上就好

给你点赞。

5楼 lixiaofei 2小时前

代理没有传递range。加上就好

代理是原样把请求头转发给B2了。我在worker中打印了了fetch后的返回值的headers，把开发模式关闭后，headers中就没有accept-ranges，开发者模式打开，headers中就会有accept-ranges。

6楼主菜单 2小时前

规则加上worker的域名缓存设置为bypass试试

7楼 lixiaofei 2小时前

规则加上worker的域名缓存设置为bypass试试

Rules那边已经设置了bypass，貌似不起作用。域名的缓存设置，没有bypass

8楼 lixiaofei 2小时前

3G的文件，你指望CF帮你缓存？

不指望他缓存，是指望走一层CF，免B2的流量费用

9楼 lixiaofei 1小时前

10楼 hjvn2211445 1小时前

楼上大佬说得对，
newHdrs.set('access-control-allow-origin', '*');
下面加一句
newHdrs.set('accept-ranges', 'bytes');

12楼 alog148 1小时前

cf缓存太多视频会被封号的

13楼 alog148 1小时前

cf的 TOS 写了禁止用免费版cf缓存大量非HTML内容（包括视频）

14楼 lixiaofei 1小时前

cf的 TOS 写了禁止用免费版cf缓存大量非HTML内容（包括视频）

不会太多，就个人用用

15楼 lixiaofei 1小时前

楼上大佬说得对，
newHdrs.set('access-control-allow-origin', '*');
下面加一句

谢谢，试了一下可以了

16楼 lixiaofei 1小时前

代理没有传递range。加上就好

刚开始理解错你的意思了。现在可以了。

申明：本文内容由网友收集分享，仅供学习参考使用。如文中内容侵犯到您的利益，请在文章下方留言，本站会第一时间进行处理。