Hey 👋🏽, I'm lgf!
我是一位web
开发者,写写文章,博客,开源项目等,antd社区成员,热爱跑步,打球,掌勺等 🤔.
simple and beautiful, powerful react player
Home Page: https://i9vy4.csb.app/
License: MIT License
向下兼容,原生video有的,作者能实现吗,希望无操作播放,现在是非要点击播放触发一个事件才行
When i setting you tube url as video src video is not playing
视频没有自动播放功能
目前控制器仅支持操作后延迟隐藏,暂停阶段也会隐藏的话使用非常不方便,建议暂停阶段保持显示控制器及进度条。
配合自适应宽高用来做页面视频背景挺好的
按方向键,可以视频前进和后退吗,我试了没反应。
propsAttributes!.setEndPlayContent
请问!.是什么用法
第一,在antd pro里面的drawer组件里面播放hls视频是不行的,一直在重复加载。
第二,播放器下方的控制组件最好处理一下,比如加个模糊背景之类,否则容易和视频内容混在一起导致控件难以辨认。
dev模式是正常的,build就报错无法运行。
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
https://reactjs.org/docs/error-decoder.html/?invariant=130&args[]=object&args[]=
"use client";
import React, { useState } from "react";
import AppNavBar from "@/components/NavBar";
import HPlayer from "@/components/HPlayer";
export default function ToolIndex({ props }) {
// console.log(props);
const [videoSrc, setVideoSrc] = useState();
return (
<>
<AppNavBar></AppNavBar>
{/* <HPlayer></HPlayer> */}
</>
);
}
Server Error
ReferenceError: document is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
u
file:///J:/HBQ/code/web_front/nextjsDemos/next-demo1/node_modules/jol-player/index.js (1:14754)
when stoped the recording - where the video should be visible Only in safari (ios) i am getting "Error : Video source not found". else on other browsers it is working fine
<div className=" video-player pb-4">
{" "}
<JolPlayer
className="player m-auto"
option={{
height: 250,
mode: "scaleToFill",
width: 350,
language: "en",
controls: true,
loop: false,
setBufferContent: "Loading...",
videoType: "video/mp4",
nextButton: true,
prevButton: true,
pausePlacement: "center",
isShowWebFullScreen: true,
isProgressFloat: true,
videoSrc:
testvideo[testvideo?.length - 1],
}}
/>
</div>
please fix it
能否控制一下所有的css作用域,引入库之后 会影响到其他样式
i get invalid hook call on the example alone
width
是否可以支持传字符串进去,我想传 100%
,但目前好像不支持
或者把 width
改成非必传参?
"use client";
import { Modal } from "@/components/ui/modal";
import JolPlayer from "jol-player";
interface AlertModalProps {
isOpen: boolean;
onClose: () => void;
}
export const ApresentationModal: React.FC<AlertModalProps> = ({
isOpen,
onClose,
}) => {
return (
<Modal title="" description="" isOpen={isOpen} onClose={onClose}>
<div className="pt-6 w-flex h-[200px] bg-red-200">
<JolPlayer
className=" h-[200px] !w-full"
option={{
videoSrc: "/apresentation.mp4",
autoPlay: true,
height: 200,
language: "en",
isShowMultiple: false,
isShowPauseButton: true,
isShowWebFullScreen: true,
}}
/>
</div>
</Modal>
);
};
"jol-player": "^4.0.0",
i'm using Next 13
大致是这样的需求:
需要自定义一些装饰组件,能够根据播放时间修改组件的动画效果
但是这个装饰动画层需要在视频层级之上,但是不能覆盖在播放按钮那一层
如果直接自己做mask盖在joi-player上的话能实现效果,但是会覆盖播放按钮
能够加一个prop支持吗
少数情况下会有这个需求
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.