嘟嘟社区

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

moe

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

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

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

复制代码

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

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

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

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

这个是打开 开发模式

这个是关闭 开发模式

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

筒子们有办法解决吗？

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

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

  1. ‘use strict’;
  2. const b2Domain = ‘xxxxx.backblazeb2.com’; // configure this as per instructions above
  3. const b2Bucket = ‘xxxxxxxxx’; // configure this as per instructions above
  5. const b2UrlPath = `/file/${b2Bucket}/`;
  6. addEventListener(‘fetch’, event => {
  7.         return event.respondWith(fileReq(event));
  8. });
  10. // define the file extensions we wish to add basic access control headers to
  11. const corsFileTypes = [‘png’, ‘jpg’, ‘gif’, ‘jpeg’, ‘webp’];
  13. // backblaze returns some additional headers that are useful for debugging, but unnecessary in production. We can remove these to save some size
  14. const removeHeaders = [
  15.         ‘x-bz-content-sha1’,
  16.         ‘x-bz-file-id’,
  17.         ‘x-bz-file-name’,
  18.         ‘x-bz-info-src_last_modified_millis’,
  19.         ‘X-Bz-Upload-Timestamp’,
  20.         ‘Expires’
  21. ];
  22. const expiration = 31536000; // override browser cache for images – 1 year
  24. // define a function we can re-use to fix headers
  25. const fixHeaders = function(url, status, headers){
  27.         let newHdrs = new Headers(headers);
  28.         // add basic cors headers for images
  29.         if(corsFileTypes.includes(url.pathname.split(‘.’).pop())){
  30.                 newHdrs.set(‘Access-Control-Allow-Origin’, ‘*’);
  31.         }
  32.         // override browser cache for files when 200
  33.         if(status === 200){
  34.                 newHdrs.set(‘Cache-Control’, "public, max-age=" + expiration);
  35.         }else{
  36.                 // only cache other things for 5 minutes
  37.                 newHdrs.set(‘Cache-Control’, ‘public, max-age=300’);
  38.         }
  40.         newHdrs.set(‘access-control-allow-credentials’, ‘true’);
  41.         newHdrs.set(‘access-control-allow-headers’, ‘*’);
  42.         newHdrs.set(‘access-control-allow-methods’, ‘*’);
  43.         newHdrs.set(‘access-control-allow-origin’, ‘*’);
  45.         // set ETag for efficient caching where possible
  46.         const ETag = newHdrs.get(‘x-bz-content-sha1’) || newHdrs.get(‘x-bz-info-src_last_modified_millis’) || newHdrs.get(‘x-bz-file-id’);
  47.         if(ETag){
  48.                 newHdrs.set(‘ETag’, ETag);
  49.         }
  50.         // remove unnecessary headers
  51.         removeHeaders.forEach(header => {
  52.                 newHdrs.delete(header);
  53.         });
  54.         return newHdrs;
  55. };
  56. async function fileReq(event){
  58.         const cache = caches.default;
  60.         let request = await event.request.clone()
  61.         const url = new URL(request.url);
  62.         url.host = b2Domain
  64.         const newreq = new Request(url.toString(), request)
  66.         let response = await cache.match(newreq); // try to find match for this request in the edge cache
  67.         if(response){
  68.                 // use cache found on Cloudflare edge. Set X-Worker-Cache header for helpful debug
  69.                 let newHdrs = fixHeaders(url, response.status, response.headers);
  70.                 newHdrs.set(‘X-Worker-Cache’, "true");
  71.                 return new Response(response.body, {
  72.                         status: response.status,
  73.                         statusText: response.statusText,
  74.                         headers: newHdrs
  75.                 });
  76.         }
  78.         // no cache, fetch image, apply Cloudflare lossless compression
  80.     response = await fetch(newreq);
  81.         let newHdrs = fixHeaders(url, response.status, response.headers);
  82.         response = new Response(response.body, {
  83.                 status: response.status,
  84.                 statusText: response.statusText,
  85.                 headers: newHdrs
  86.         });
  88.         event.waitUntil(cache.put(newreq, response.clone()));
  89.         return response;
  90. }

复制代码
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。
规则加上worker的域名缓存设置为bypass试试

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

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

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

不指望他缓存，是指望走一层CF，免B2的流量费用
dd
楼上大佬说得对，
        newHdrs.set(‘access-control-allow-origin’, ‘*’);
下面加一句
        newHdrs.set(‘accept-ranges’, ‘bytes’);