lgf196 / jol-player Goto Github PK

View Code? Open in Web Editor NEW

388.0 10.0 79.0 640 KB

simple and beautiful, powerful react player

Home Page: https://i9vy4.csb.app/

License: MIT License

JavaScript 5.70% HTML 0.28% TypeScript 77.18% SCSS 16.83%

typescript react video html5 react-video video-player

jol-player's Introduction

Hey 👋🏽, I'm lgf!

我是一位web开发者，写写文章，博客，开源项目等，antd社区成员，热爱跑步，打球，掌勺等 🤔.

微信公众号：木子李的夏天

jol-player's People

Contributors

Stargazers

Watchers

Forkers

wjzbe3 lyhiving alex-code-max xxv0 mcc-stack 2013dedaigua wuhan1998 trendingtechnology baijingnan jsling centurypark yueyourd outlinety refou-89 mrxujiang xianzhiding chenxinyuy gpsbird mianmalife helloworld-zw skyplaying rezaashrafi77 196lgf hoseinabh wuchunfu jiuguihuasheng jee-zh xiaozhu-2018 wwb568109135 senlion-web liushiliang henuajy chenchunchang coldwaterfish eilcopaewr wanghanting npljy qianchia geminilove hummerbor sycisagod floodboad bellayeh7 chuckyu-frontend aolef wldld liufanghedy skylingfly simond110 cnsixgod dewjohn sylarliao qhc99 gs3170981 victoryblue bobo8855 666smile666 small-z-hu qinleon moli-nuanyang haowubai123 ukea dzwqwer dingyuwen habibkadiri inc904 jasonchang0905 zackin-he stevenlee19820119 wenqi100 xiyueyezibile liangliangzhe fudada-521 tendguo webbdong kuan-10

jol-player's Issues

width 属性无法传入 100%

width 是否可以支持传字符串进去，我想传 100%，但目前好像不支持

或者把 width 改成非必传参？

iOS no data when stop recording

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>

建议控制器隐藏逻辑优化

目前控制器仅支持操作后延迟隐藏，暂停阶段也会隐藏的话使用非常不方便，建议暂停阶段保持显示控制器及进度条。

视频网页全屏之后，当视频播放结束时，鼠标不见了，不管怎么触发鼠标，鼠标箭头都不见出来

测试用例代码的时候出现Cannot read properties of null (reading 'useRef')

希望可以得到你的回复

Cannot read properties of null (reading 'play')

组件挂载时调用play()方法报错；

例如：

 useEffect(() => {
    console.log(`videoRef.current`, videoRef.current);
    videoRef.current.play();  //  videoRef.current 不是 null
  }, [videoRef.current]);

能否给一个方法监听，何时视频可以播放

反馈两个问题

第一，在antd pro里面的drawer组件里面播放hls视频是不行的，一直在重复加载。
第二，播放器下方的控制组件最好处理一下，比如加个模糊背景之类，否则容易和视频内容混在一起导致控件难以辨认。

not working

i get invalid hook call on the example alone

音量键不能改变值，一改变值，鼠标一离开，就恢复默认的音量值了

能否支持播放按钮下自定义layer的渲染

大致是这样的需求：
需要自定义一些装饰组件，能够根据播放时间修改组件的动画效果
但是这个装饰动画层需要在视频层级之上，但是不能覆盖在播放按钮那一层
如果直接自己做mask盖在joi-player上的话能实现效果，但是会覆盖播放按钮
能够加一个prop支持吗

YouTube issue

When i setting you tube url as video src video is not playing

请问!.是什么用法

propsAttributes!.setEndPlayContent
请问!.是什么用法

如何实现像原生video一样，静音自动播放，一定是要通过一个事件触发吗？有没有类似于先静音然后设置autoplay的方法

向下兼容，原生video有的，作者能实现吗，希望无操作播放，现在是非要点击播放触发一个事件才行

请问在nextjs中如何使用呢？

"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)

vite下面打包react后报错，请教怎么解决？

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[]=