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

本帖最后由 lixiaofei 于 2021-10-27 12:17 编辑

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

let contentType = newHdrs.get(‘content-type’)
if(contentType.indexOf("video") === 0){
newHdrs.set(‘accept-ranges’, ‘bytes’);
}

复制代码

———————————-

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

但是打开CF的开发模式，就可以正常拖拽播放了。
【已解决】CF Workers代理视频后不能拖动播放

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

这个是打开开发模式
【已解决】CF Workers代理视频后不能拖动播放

这个是关闭开发模式

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

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

筒子们有办法解决吗？

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

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

‘use strict’;
const b2Domain = ‘xxxxx.backblazeb2.com’; // configure this as per instructions above
const b2Bucket = ‘xxxxxxxxx’; // configure this as per instructions above
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){
let newHdrs = new Headers(headers);
// add basic cors headers for images
if(corsFileTypes.includes(url.pathname.split(‘.’).pop())){
newHdrs.set(‘Access-Control-Allow-Origin’, ‘*’);
}
// override browser cache for files when 200
if(status === 200){
newHdrs.set(‘Cache-Control’, "public, max-age=" + expiration);
}else{
// only cache other things for 5 minutes
newHdrs.set(‘Cache-Control’, ‘public, max-age=300’);
}
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;
}

复制代码

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

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

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

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

chxin 发表于 2021-10-27 11:17
代理没有传递range。加上就好

给你点赞。

chxin 发表于 2021-10-27 11:17
代理没有传递range。加上就好

代理是原样把请求头转发给B2了。我在worker中打印了了fetch后的返回值的headers，把开发模式关闭后，headers中就没有accept-ranges，开发者模式打开，headers中就会有accept-ranges。【已解决】CF Workers代理视频后不能拖动播放

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

主菜单发表于 2021-10-27 11:24
规则加上worker的域名缓存设置为bypass试试

Rules那边已经设置了bypass，貌似不起作用。域名的缓存设置，没有bypass 【已解决】CF Workers代理视频后不能拖动播放

allnetstore 发表于 2021-10-27 11:17
3G的文件，你指望CF帮你缓存？

不指望他缓存，是指望走一层CF，免B2的流量费用【已解决】CF Workers代理视频后不能拖动播放

楼上大佬说得对，
newHdrs.set(‘access-control-allow-origin’, ‘*’);
下面加一句
newHdrs.set(‘accept-ranges’, ‘bytes’); 【已解决】CF Workers代理视频后不能拖动播放