javascript - Swiper.js 延迟加载实现与 .m3u8 视频

Question

我正在尝试使用 ReactPlayer 实现 Swiper 延迟加载。问题是我m3u8从后端接收格式。对于像我这样的常见视频格式，mp4我会使用<video>标签，并且实现将是显而易见的。但就我而言，我需要一个m3u8格式播放器，这给我带来了问题。

有没有办法通过使用 ReactPlayer、任何其他播放器甚至没有播放器来实现它？

请不要严格评判我。

我将不胜感激任何帮助或建议。

import "./styles.css";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Lazy } from "swiper";
import ReactPlayer from "react-player";
import { v1 } from "uuid";
import "swiper/swiper.min.css";

export default function App() {
  const settings = {
    lazy: true,
  };

  SwiperCore.use([Lazy]);

  const urls = [
    {
      id: v1(),
      url:
        "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
      poster: "https://via.placeholder.com/150/FFFF00/000000",
    },
    {
      id: v1(),
      url:
        "https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8",
      poster: "https://via.placeholder.com/150/FFFF00/000000",
    },
    {
      id: v1(),
      url:
        "https://multiplatform-f.akamaihd.net/i/multi/april11/sintel/sintel-hd_,512x288_450_b,640x360_700_b,768x432_1000_b,1024x576_1400_m,.mp4.csmil/master.m3u8",
      poster: "https://via.placeholder.com/150/FFFF00/000000",
    },
  ];

  return (
    <div className="App">
      <Swiper {...settings}>
        {urls.map(({ id, url, poster }) => (
          <SwiperSlide key={id}>
            <ReactPlayer
              controls={true}
              url={url}
              config={{
                attributes: {
                  poster,
                  className: "swiper-lazy",
                  "data-src": url,
                },
              }}
              width="100%"
              height="300px"
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

这是我的代码框。Swiper 延迟加载。

标签： javascriptreactjslazy-loadinghttp-live-streamingswiper