Member Avatar for martin225

How can I embed streaming video on HTML page? Will it use lots of bandwidth?

  • 4 Contributors
  • 3 Replies
  • 184 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by dream party

Dani AI

Generated

Short answer for : use the HTML5 approach or an embed from a streaming host instead of the Flash/FLV workflow mentioned by and — Flash was retired and is no longer a safe choice. Modern browsers provide native video support via the <video> element, and major hosts (YouTube/Vimeo) handle encoding, CDN delivery and player UI if you prefer not to run your own streaming stack. (learn.microsoft.com)

A practical embed pattern (broad compatibility + captions) — put this in your page:

<video controls playsinline preload="metadata" poster="thumb.jpg" width="640" height="360">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4"  type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
  Your browser does not support HTML5 video.
</video>

For adaptive HLS streams (live or ABR VoD) use hls.js in non‑Safari browsers and fall back to the native src for Safari: (developer.mozilla.org)

Bandwidth — how much will it use? Look at target bitrate (e.g. YouTube recommends ~8 Mbps for 1080p). Convert Mbps to MB/min: MB_per_min = Mbps 60 / 8 (≈ Mbps 7.5). So 8 Mbps ≈ 60 MB/min ≈ 3.6 GB/hour. Lower bitrates or adaptive streaming dramatically reduce cost and buffering for viewers. If you don’t want to pay or tune a CDN, upload and embed (as suggested) to YouTube/Vimeo and let them handle delivery. ()

Quick checklist

  • Pick hosting: platform embed (YouTube/Vimeo) for simplicity or self-host + CDN + ABR (HLS/DASH) for control. (dashif.org)
  • Transcode into multiple bitrates/resolutions (H.264 MP4 as baseline; WebM/AV1 for savings where supported). (developer.mozilla.org)
  • Use poster, preload="none" for non-critical videos and lazy-load embeds to save bandwidth.
  • Add captions via WebVTT and <track> for accessibility and compliance. (developer.mozilla.org)

These steps give a modern, mobile-friendly experience and let you control bandwidth costs while keeping playback reliable.

Recommended Answers

All 3 Replies

Member Avatar for Alberts

Most streaming video (e.g. Youtube) are actually flash video, you would need to convert your avi, mpeg files into FLV file format first, then use a flash player to play it online. You can try this Flash video player software () which automatically converts your video and allow you to choose a few video player designs. However, you need to keep in mind video uses a lot more bandwidth than images, so you need to ensure your hosting plan supports that and if you need to change your hosting plan to support that.

Member Avatar for Jen0608

yes... upload it first then you can just cut and paste the url to your page.

Member Avatar for dream party

You can use FLV as video format, and make a flash video player to play the FLV file, the flash video player is a SWF file that can be embedded into web page with HTML embed tag. (FLash OBJECT and EMBED tag)

<object classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="432" height="330" id="myMovieName" >
<param name="movie" value="myMovieName.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF">
<embed src="myMovieName.swf" quality="high" bgcolor="#FFFFFF" width="432" height="330" name="myMovieName" align="" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

Making flash video player in Aodbe Flash CS3 will be technical, you can use this web player Pro that will generate a custom flash video player for website and also provide a free video to flv converter.

For the bandwidth, it depends. If your streaming video will be visited by a lot of people, this will take much bandwidth.

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.