Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

after code deploy to vercel , the video player can only listen to sound, but the player screen is black. #1690

Open
Marcustar opened this issue Jan 2, 2025 · 0 comments

Comments

@Marcustar
Copy link

Marcustar commented Jan 2, 2025

Description

after code deploy to vercel , the video player can only listen to sound, but the player screen is black. nothing can be see.

The code work fine in local development environment.

Steps to reproduce

view this link:
https://blog-7j6ddwug8-marcustars-projects.vercel.app/

JS code that you use to initialize lightGallery.

  return (
    <div className={styles.albumContainer}>
      <LightGallery
        elementClassNames={styles.videoWrapper}
        plugins={[lgVideo]}
        licenseKey='XXXXXXXX'
        download={false}
        counter={false}
        videojsOptions={{
          muted: false,
          controls: true
        }}
      >
        {videos.map((video, index) => (
          <a
            key={index}
            data-video={`{"source": [{"src":"${video.url}", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}`}
            data-sub-html={`<h4>${video.title}</h4>`}
            className={styles.videoItem}
            style={{ display: index === 0 ? 'block' : 'none' }}
          >
            <video
              className={styles.video}
              poster={generatePoster(video.url)}
              playsInline
            >
              <source src={video.url} type="video/mp4" />
            </video>
          </a>
        ))}
      </LightGallery>
    </div>
  );

Sample HTML markup

<div class="lg-react-element videoWrapper_TPjk">
<a data-video="{&quot;source&quot;: [{&quot;src&quot;:&quot;https://blog-staryu-cn.oss-cn-shanghai.aliyuncs.com/shorts/2021-short-video/2022-rely-aliali-li.mp4&quot;, &quot;type&quot;:&quot;video/mp4&quot;}], &quot;attributes&quot;: {&quot;preload&quot;: false, &quot;controls&quot;: true}}" data-sub-html="<h4>2022-rely-aliali-li</h4>" class="videoItem_C1Vn" style="display:block" data-lg-id="4d9e5b59-8b2f-4644-b47d-83a0ab4d5c81">
<video class="video_jdjc" poster="https://blog-staryu-cn.oss-cn-shanghai.aliyuncs.com/shorts/2021-short-video/2022-rely-aliali-li.mp4?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_450,m_fast" playsinline=""><source src="https://blog-staryu-cn.oss-cn-shanghai.aliyuncs.com/shorts/2021-short-video/2022-rely-aliali-li.mp4" type="video/mp4"></video>
</a>
</div>

Environment

  • lightGallery version - lightgallery 2.8.2

Additional context

no.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant