I have alot of home videos I want to put on my website, and it seems that the easiest way to do it would be to embed it onto my website using HTML script. Problem is, I have no clue how to convert in into HTML script. Could someone please tell me how?
wxoklp 0 Newbie Poster
Dani AI
Generated
Modern, reliable approach: transcode your camera files to web-friendly codecs and use the HTML5 <video> element rather than the Windows-only OBJECT/EMBED approach shown by . is right that GUI tools (Camtasia or other converters) can do the work for you, and is also correct that hosted services avoid bandwidth headaches — this post fills the gap on a practical encoding + embed workflow you can apply today.
Step 1 — target formats: produce an MP4 (H.264 + AAC) for maximum device support and a WebM fallback. Step 2 — transcode with ffmpeg (fast, free). Example commands:
ffmpeg -i input.mov -c:v libx264 -preset medium -crf 23 -c:a aac -b:a 128k -movflags +faststart output.mp4 ffmpeg -i input.mov -c:v libvpx-vp9 -b:v 1M -c:a libopus output.webm Create a poster image for the player UI:
ffmpeg -i input.mov -ss 00:00:02 -vframes 1 poster.jpg Use CRF ~18-23 for good quality tradeoffs; lower CRF = better quality/larger files. The -movflags +faststart flag helps the MP4 stream progressively in browsers.
Embed example (HTML5):
<video controls width="640" poster="poster.jpg" preload="metadata">
<source src="output.mp4" type="video/mp4">
<source src="output.webm" type="video/webm">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
Your browser does not support HTML5 video. Download: <a href="output.mp4">MP4</a>
</video> Final notes: ensure your server sends correct MIME types (video/mp4, video/webm, text/vtt) and supports HTTP range requests so seeking works. Test on desktop and mobile (iOS prefers MP4/H.264). For hosting, self-host only if you can handle bandwidth and range requests; otherwise use a CDN or a managed host (YouTube/Vimeo) with privacy settings. See the HTML5 <video> reference on MDN for attributes and compatibility: HTML video element. For encoding details and downloads: FFmpeg.
Recommended Answers
Jump to Post— almostbob 866mostly,
embedded media players are like the <img> tag
they take a number of parameters, size, filename, filetype, a href to the codec where applicable.
the exact process, depends on the filetype of the video
I use wmv on my home vids, the format my camera takes the video html …
All 3 Replies
almostbob 866 Retired: passive income ROCKS
mostly,
embedded media players are like the <img> tag
they take a number of parameters, size, filename, filetype, a href to the codec where applicable.
the exact process, depends on the filetype of the video
I use wmv on my home vids, the format my camera takes the video html to display asf/wmv looks like this
<A href="http://www.microsoft.com/windows/windowsmedia/player/download/"><IMG ALT="Get Windows Media Player" SRC="http://www.microsoft.com/windows/windowsmedia/images/logos/getwm/mp11_88x31_static.gif" WIDTH="88" HEIGHT="31" BORDER="0"></A><br>
<OBJECT ID="MediaPlayer1" width=384 height=300 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<PARAM NAME="fileName" VALUE="MYFILE"> <!-- configurable -->
<PARAM NAME="showControls" VALUE="true">
<PARAM NAME="PlayCount" VALUE="0">
<PARAM NAME="animationatStart" VALUE="true">
<PARAM NAME="transparentatStart" VALUE="true">
<PARAM NAME="autoStart" VALUE="true">
<EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" SRC="" name="MediaPlayer1" width=360 height=260 AutoStart=true></EMBED></object></p> I have a number of video clips in a folder the php script, makes a folder full of .wmv or .asf files a playlist
<?php ob_start("ob_gzhandler"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"><meta name="distribution" content="global">
<meta http-equiv="content-Script-Type" content="text/javascript"><meta name="author" content="Rob Dockrey 2004">
<script type="text/javascript">
<!--//
function shrink(){
document.getElementById("MediaPlayer1").style.width=384;
document.getElementById("MediaPlayer1").style.height=300;
}
function enLarge(){
document.getElementById("MediaPlayer1").style.width=480;
document.getElementById("MediaPlayer1").style.height=402;
}
//-->
</script>
<style type='text/css'>
<!--
.logo { background: transparent; color: #000000; text-align: right; font-size: 85%; top: auto; left: auto; bottom: 1px; right: 1px; position: fixed; }
//-->
</style>
<title>video - Entertainment</title>
</head><body><a name='top'></a>
<p class='logo'>
<button onclick="enLarge()">large</button>
<button onclick="shrink()">small</button>
<a class='button' href='..'>Main Menu</a>
<A href="http://www.microsoft.com/windows/windowsmedia/player/download/"><IMG ALT="Get Windows Media Player" SRC="http://www.microsoft.com/windows/windowsmedia/images/logos/getwm/mp11_88x31_static.gif" WIDTH="88" HEIGHT="31" BORDER="0"></A><br>
<OBJECT ID="MediaPlayer1" width=384 height=300 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<PARAM NAME="fileName" VALUE="">
<PARAM NAME="showControls" VALUE="true">
<PARAM NAME="PlayCount" VALUE="0">
<PARAM NAME="animationatStart" VALUE="true">
<PARAM NAME="transparentatStart" VALUE="true">
<PARAM NAME="autoStart" VALUE="true">
<EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" SRC="" name="MediaPlayer1" width=360 height=260 AutoStart=true></EMBED></object></p>
<p>Videos<div style='float:left; text-align:left;'>
<?php $p = split('/', $_SERVER['SCRIPT_FILENAME']);
$script_name = $p[count($p)-1];
$path = str_replace($script_name, '', $_SERVER['SCRIPT_FILENAME']);
$dir_handle = @opendir($path) or die("Unable to open $path");
Function get_Extension($m_FileName){
$path_parts = pathinfo($m_FileName);
if ($path_parts["extension"]) {
$m_Extension = strtolower($path_parts["extension"]);
return(strtoupper($m_Extension));
}
else { return "unknown file"; }
}
function check_image($filename){
$temp=strtoupper(get_Extension($filename));
if(($temp=="WMV")||($temp=="ASF"))
return (true);
else
return (false);
}
Function get_Files($path) {
if ($handle = opendir($path)) {
while (false !== ($file = readdir($handle))) {
if(!is_dir($file) && substr($file,O,1) != "."){
$m_Files[]=$file;
}
}
closedir($handle);
}
if(sizeof($m_Files)>1)
asort($m_Files);
return $m_Files;
}
$files=get_Files($path);
$filter_files=array_filter($files,"check_image");
$maxnr=sizeof($filter_files)-1;
sort($filter_files);
for ($i=0;$i<sizeof($filter_files);$i++){
echo "<a onclick=\"MediaPlayer1.SRC='$filter_files[$i]';MediaPlayer1.fileName='$filter_files[$i]';\">";
echo substr($filter_files[$i], 0, strlen($filter_files[$i])-4);
echo "</a><br>";
}
closedir($dir_handle); ?>
</p>
</body>
</html>
<?php ob_flush(); ?> Again the code depends on your file type,
google for "embed ".$myfiletype." streaming media";
tonykachappilly 0 Newbie Poster
u'll get a tool(camtasia studio) for creating html tags for the video u have whether in avi,mp4......... u can u se tat to generate the html
Member #120589
Why not upload to something like Vimeo ac just embed the code that it spits out? Use Vimeo's 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.