Member Avatar for davy_yg

Hello,

I would like to display a video file on my website. For example youtube video when someone click the small video icon then a larger video begin to open and showing a video file with a transparent black background.

How to do so?

Thanks in advance.

Edited by davy_yg
  • 2 Contributors
  • 2 Replies
  • 188 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by veedeoo

Dani AI

Generated

Brief update that follows ’s suggestion but avoids plugins: showing a small thumbnail that opens a larger video over a semi‑transparent black backdrop is best done with native HTML5 video plus a modal/dialog UI, not with legacy Flash/FLV. This keeps playback working on modern desktops and mobiles and avoids extra plugin maintenance. (adobe.com)

If you have FLV files, convert them before serving. Two common ffmpeg approaches are: fast stream-copy when codecs are already compatible, or re-encode when they are not. Example commands:

# fast container copy (no re-encode)
ffmpeg -i input.flv -c copy output.mp4

# re-encode to a broadly compatible web file
ffmpeg -i input.flv -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k -movflags +faststart output.mp4

See ffmpeg for details and options. (ffmpeg.org)

Typical structure for the thumbnail → overlay UX (use the native <dialog> where available, or a custom modal with the same accessibility behaviors). Keep a poster image, include controls and playsinline, and pause/reset the video when the modal closes:

<button id="open"><img src="thumb.jpg" alt="Play video"></button>

<dialog id="player">
  <button id="close">Close</button>
  <video controls playsinline preload="metadata" poster="thumb.jpg" width="800">
    <source src="output.mp4" type="video/mp4">
    <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
    Your browser does not support video.
  </video>
</dialog>

<script>
  const d = document.getElementById('player');
  document.getElementById('open').addEventListener('click', ()=> d.showModal());
  document.getElementById('close').addEventListener('click', ()=> { d.close(); d.querySelector('video').pause(); d.querySelector('video').currentTime = 0; });
</script>

Use ::backdrop or CSS to darken the background and follow dialog focus rules for accessibility. Test captions (WebVTT) and meet WCAG caption requirements for prerecorded media. Also check server MIME types and CORS so range requests and streaming work reliably on all browsers. (developer.mozilla.org)

Recommended Answers

All 2 Replies

Member Avatar for davy_yg

Nevermind about youtube video. I think I am looking for a method to display flv video on the website. Any idea?

Member Avatar for veedeoo

you can use either jwplayer or flowplayer. If you will be targeting mobile users, then flv video should be the fallback video. The ogg, mp4 will be the first two options or better yet go for the VP9 or h264 (These two offers the best video quality just few notches below the HD matroska video container.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.