|
HTML - Streaming/embedded 720 Video
I would like to include on my website streaming HD video not unlike Youtube or Vimeo. How hard is this? Both in terms of the video compression and the coding for the site. Where do I look for info to help me out?
I have a very basic knowledge of HTML and CSS, but not much else. Are the videos on Youtube and Vimeo flash? I am not sure if "streaming" or "embedded" is the proper term for what I want to do. I'll be starting with mp4 files, since those are best for encoding HD... I use x264 codec and encode 720p @ 2.5Mbps for great quality and decent filesize. But somehow Youtube compresses it even further. Example, I had a 5 minute 720p mp4 file that was around 100MB. I uploaded it to Youtube and it is now available in HD and looks pretty good. But if I watch my network connections as I am streaming it, only 20MB transfers... which means they compressed it 5 times better than I had it! That is definitely important because if I try to have streaming HD and it's not compressed enough, it won't be watchable for most people. Similar TutorialsHi all, I'm looking for a way to embed a streaming video in a web page in such a way that the user cannot easily download it. Currently we're doing this with Quicktime streaming server (QTSS) on a Mac server - this works, but the ports it uses are preventing some people from viewing the videos due to strict firewall settings so I'm looking for alternatives. Flash is possible, but expensive. Does anyone know of a way to do this which is free (or at least cheap)? Many thanks hello guys hr u ?? i have a problem i have already a streaming server .. and i created a website using iweb but i don't know how to write the HTML code i found this code but i want to upload it from my strwaming server ?how ?? Quote: < object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240" id="fullscreen" align="middle"> < param name="allowScriptAccess" value="sameDomain" /> < param name="movie" value="flvplayer.swf" /> < param name="quality" value="high" /> < param name="salign" value="tl" /> < param name="bgcolor" value="#ffffff" /> < param NAME=FlashVars VALUE="file=ENTER_YOUR_FLV_FILENAME_HERE.flv"> < embed src="flvplayer.swf" FlashVars="file=ENTER_YOUR_FLV_FILENAME_HERE.flv" quality="high" salign="tl" bgcolor="#ffffff" width="320" height="240" name="fullscreen" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave- flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> < /object> Hi: I have a Logitech QuickCam Pro 9000 webcam mounted on my monitor (for Skype) of my development machine in front of me. I also have my own Apache Server sitting on another Dell desktop beside me, and a Dell Laptop completing the set of three XP Pro machines connected together on my little local intranet. I would like to gently test the waters of live video streaming from my camera thru my local intranet to my Apache server and out into the wide web world ) You folks have already helped me get started in web page design, and my site is now operating very nicely. Now I'd like to add video to my site. I would consider this a startling success if, in a few weeks, I could visit my website and click on a link and see live video of me typing on my keyboard here ) I would appreciate some starting tips please. Software, guidance, hardware, etc Thank you ! -Mel Smlith Is there any way to embed windows media video into html without using active-x. This would be for a computer without administrative priveledges (unable to download active-x components) to view video through an html interface. I can only think of using a direct link to the file, which would require the player to be used externally. I think any embedded call up of the player will need to use embed or object tags, which need active-x (as far as I can tell, and my testing has shown) Any light shone on this black math would be greatly appreciated-- Thanks, Tim Here is the code I'm using to put in the video window: HTML Code: <script>
function doChangeVideo(myVal)
{
mediaPlayer.autoStart= "true"
mediaPlayer.fileName= myVal
}
</script>
.
.
.
<table border='0' cellpadding='0' align="center">
<tr><td>
<OBJECT id='mediaPlayer' width="320" height="285"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="mms://media.huntingtonnews.net/video/2007/TheClinicalCenterPlant-1.wmv">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='false'>
<param name='autoStart' value="false">
<param name='showControls' value="true">
<param name='loop' value="false">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="285"
src="mms://media.huntingtonnews.net/video/2007/TheClinicalCenterPlant-1.wmv" autostart="false" designtimesp='5311' loop="false">
</EMBED>
</OBJECT>
</td></tr>
<!-- ...end embedded WindowsMedia file -->
<!-- begin link to launch external media player... -->
<tr><td align='center'>
<a href="mms://media.huntingtonnews.net/video/2007/TheClinicalCenterPlant-1.wmv" style='font-size: 85%;' target='_blank'>Launch in external player</a>
<!-- ...end link to launch external media player... -->
</td></tr>
</table>
<CENTER><form>
<select name="section" size="1" language="javascript" onChange="doChangeVideo(this.options[selectedIndex].value);">
<option selected>Select a video...</option>
<option value= "mms://media.huntingtonnews.net/video/2007/BillDargusch-Downtowns-1.wmv">Happy Daze</option>
<option value= "mms://media.huntingtonnews.net/video/2007/AtlantisLaunch-1.wmv">Shuttle Atlantis Suffers Some Damage during Launch</option>
<option value= "mms://media.huntingtonnews.net/video/2007/TheTams@PullmanSquare-1.wmv">Pullman Kicks Off Summer Concert Series</option>
</select>
</form></CENTER>
And everytime you scroll the page up and down the video just stalls on a single frame and the controls can't get it running correctly again, you just have to choose another option. And also any time I choose an option on the drop down menu the entire page locks up until the streaming video completes buffering. I'm using the CIT embedded video generator code here so I don't know it as well as I should but are there some ways to fix those problems with it or is it just going to be like that with embedded windows media player?... Codeguru Hello! I'm developing a site for a local comedy troupe and was wondering what would be the best way to go about this. Here is the draft: www.djhmusic.com/tlk Listed at the top left are each of the troupe's sketches. I want to be able to click on, for example, "Mood Rings" and have the youtube embedded video play in that video window where the player graphic is. The embed code for the Mood Rings video on youtube is: <code> <!--Begin <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/INuh84DCJbM"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/INuh84DCJbM" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> --end> </code> What's the best/easiest way to do this? iframes? Thanks so much, Dan Hello guys, I have embedded this video on simple html page. I want that video to float in the middle of the screen. It looks OK on FireFox, but it appears on the left edge when played on Safari. (I have not checked it on IE.) What is wrong with that code? here is the link to that page: http://www.icebergfilms.com/cineDemo.html and here is that code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title>cinematography Demo by IcebergFilms</title> </head> <body bgcolor="#000000"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320"> <param name="src" value="http://www.icebergfilms.com/demo1.mov"> <param name="autoplay" value="true"> <param name="type" value="video/quicktime" height="448" width="768"> <table width="768" height="548" align="center"> <tr> <td><embed src="http://www.icebergfilms.com/demo1.mov" align="middle" height="448" width="768" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></td> </tr> </table> </object> </body> </html> Thank you so much for any advise. Hi all, I'd like some help with the coding so that I can wrap text around embedded video. I'm not a genious at HTML so if you could make it easy to understand that would be great. Thanks in advance. Hi i have sucessfully added an embedded code to my site... not a problem.. copied and pasted html coding from a video.. into html view.. fine. However.. the video appears top left of my page always. Within the embed video code i see no parameters for screen positioning.. just size.. which is repeated twice (all codes from utube vids etc seem the same) eg <object width="400" height="300" ><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://www.facebook.com/v/124990176803" /><embed src="http://www.facebook.com/v/124990176803" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed></object> is there a piece of html code i should add... either within this before it or after it? Im new to this stuff.. been on ages! Please help! I would like to link an youtube video on one of my blog post using the embedded code that youtube provided. So I added in my post html view this code: <iframe width="640" height="360" src="http://www.youtube.com/embed/mIhqjRWZ77Y" frameborder="0" allowfullscreen></iframe> Before to publish the post I tested it, with the wordpress preview option. Some browser not works well.This is the scenario: 1) Using the last version of the Internet Explorer browser the post with the video works fine. 2) Using the last version of the Google Chrome browser I have to reload the html page two times before to view exactly the embedded video. After that the page works fine but when I load for the first time the page I don't see the video. 3) Using the last version of the Safari and the Firefox browser I have to reload two times the html page before to view the embedded video and after I have a problem viewing the video. The message is that the format video is not supported. Could you please help me to solve the problem. Which is the correct way to use the embedded code starting from youtube website ? How can I debug the issue ? Thanks a lot. Hello, Using the Greasemonkey script on Facebook, I was able to embed a video on my website. However, the code is not XHTML compliant (includes embed tags). The code is below. I've struggled trying to convert this into code using the object tag. is it possible? Can someone show me where I need to move each part of the existing code into an "object" based code? Thanks, Josh Code: <embed type="application/x-shockwave-flash" src="http://b.static.ak.fbcdn.net/swf/mvp.swf?7:136764" width="576" height="432" style="" id="so_mvp_swf_4962e86f49d3b2a98429149" name="so_mvp_swf_4962e86f49d3b2a98429149" bgcolor="#000000" quality="high" allowScriptAccess="always" scale="showall" allowFullScreen="true" wmode="window" flashvars="video_src=http%3A%2F%2Fvideo.ll.facebook.com%2Fvideo-ll-sf2p%2Fv1182%2F26%2F116%2F58389155428_4899.mp4&stage_width=756&stage_height=567&motion_log=%2Fvideo%2Fmotion_log.php&video_id=553535535428&video_length=408440&video_seconds=408&video_category=0&video_rotation=0&video_href=http%3A%2F%2Fwww.facebook.com%2Fvideo%2Fvideo.php%3Fv%3D58389155428&fbt_play_again=Play+Again&fbt_go_to_video=Go+to+Video&fbt_next_video=Next+Video&fbt_share=Share&video_player_type=video_player_permalink&video_width=756&video_height=567&slate_src=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fswf%2Fmvp_slate.swf%3F7%3A134155&tail_slate_src=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fswf%2Fmvp_tail_slate.swf%3F7%3A134155&next_video_url=http%3A%2F%2Fwww.facebook.com%2Fvideo%2Fvideo.php%3Fv%3D6637075428&video_owner_name=Becky+Draper-Vilimek&video_owner_href=http%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D6545535428&video_timestamp=Added+on+Thursday&video_title=Our+Wedding+-+September+13%2C+2008&thumb_url=http%3A%2F%2Fvthumb.ak.facebook.com%2Fvthumb-ak-sf2p%2Fv643%2F101%2F68%2F682235428%2Fb682244448_58389155428_1292.jpg&highqual_src=http%3A%2F%2Fvideo.ll.facebook.com%2Fvideo-ll-sf2p%2Fv247%2F26%2F116%2F58389155428_44340.mp4&lowqual_src=http%3A%2F%2Fvideo.ll.facebook.com%2Fvideo-ll-sf2p%2Fv1182%2F26%2F116%2F55355355428_4899.mp4&fbt_lowqual=View+in+Regular+Quality&fbt_highqual=View+in+High+Quality&highqual_is_on=1&string_table=http://static.ak.fbcdn.net/js_strings.php/t85501/en_US&swf_id=so_mvp_swf_4962e55435442a98429149"/> Hi there, I know nothing formal about HTML, hence the code below being converted from an Open Office file. Hopefully it is readable - it is some declarations, a body with maybe 10 links in it, and then an embedded video code from Exposure Room. I have the alignment how I want it, but the background-black in the body doesn't work any more. Is anyone able to show me how to keep the center alignments I have but also switch the background of the whole page to black? It works if I take out the <center> tags but then everything is left aligned, which I don't like. Any help would be appreciated, cheers, Tony Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!--This file was converted to xhtml by OpenOffice.org - see http://xml.openoffice.org/odf2xhtml for more info.--><head profile="http://dublincore.org/documents/dcmi-terms/"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/><title xml:lang="en-US">- no title specified</title><meta name="DCTERMS.title" content="" xml:lang="en-US"/><meta name="DCTERMS.language" content="en-US" scheme="DCTERMS.RFC4646"/><meta name="DCTERMS.source" content="http://xml.openoffice.org/odf2xhtml"/><meta name="DCTERMS.creator" content="Tony Wilkes"/><meta name="DCTERMS.issued" content="2011-04-17T19:59:38.83" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.contributor" content="Tony Wilkes"/><meta name="DCTERMS.modified" content="2011-04-17T20:31:54.51" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.provenance" content="" xml:lang="en-US"/><meta name="DCTERMS.subject" content="," xml:lang="en-US"/><link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" hreflang="en"/><link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" hreflang="en"/><link rel="schema.DCTYPE" href="http://purl.org/dc/dcmitype/" hreflang="en"/><link rel="schema.DCAM" href="http://purl.org/dc/dcam/" hreflang="en"/><base href="."/><style type="text/css">
@page { }
table { border-collapse:collapse; border-spacing:0; empty-cells:show }
td, th { vertical-align:top; font-size:12pt;}
h1, h2, h3, h4, h5, h6 { clear:both }
ol, ul { margin:0; padding:0;}
li { list-style: none; margin:0; padding:0;}
<!-- "li span.odfLiEnd" - IE 7 issue-->
li span. { clear: both; line-height:0; width:0; height:0; margin:0; padding:0; }
span.footnodeNumber { padding-right:1em; }
span.annotation_style_by_filter { font-size:95%; font-family:Arial; background-color:#fff000; margin:0; border:0; padding:0; }
* { margin:0;}
.P1 { font-size:12pt; font-family:Trebuchet MS; writing-mode:page; text-align:center ! important; color:#b3b3b3; }
.T2 { font-size:10pt; }
<!-- ODF styles with no properties representable as CSS -->
{ }
</style></head><center><body dir="ltr" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; background-color:#000000; "><p class="P1">Lying Down</p><p class="P1">*</p><p class="P1"><a href="http://www.lyingdown.co.uk/index.xhtml">Trailer</a> * <a href="http://www.lyingdown.co.uk/part1med">Part 1</a> * <a href="http://www.lyingdown.co.uk/part2med">Part 2</a> * <a href="http://www.lyingdown.co.uk/part3med">Part 3</a> * <a href="http://www.lyingdown.co.uk/part4med">Part 4</a> * <a href="http://www.lyingdown.co.uk/part5med">Part 5</a> * <a href="http://www.lyingdown.co.uk/part6med">Part 6</a> * <a href="http://www.lyingdown.co.uk/part7med">Part 7</a> * Download</p><p class="P1"><span class="T2"/></p><p class="P1"><a href="http://www.lyingdown.co.uk/indexlow"><span class="T2">Lowest quality</span></a><span class="T2"> * </span><a href="http://www.lyingdown.co.uk/indexhigh"><span class="T2">Highest Quality</span></a></p><p class="P1"><span class="T2"/></p><p class="P1">*</p>
<object id="xrPf8470a83ede543789fc18d1556be86e9" width="640" height="360" type="application/x-shockwave-flash" data="http://exposureroom.com/flash/XRVideoPlayer2.swf?domain=exposureroom.com/&assetId=f8470a83ede543789fc18d1556be86e9&size=md&titleColor=%23ffffff"><param name="movie" value="http://exposureroom.com/flash/XRVideoPlayer2.swf?domain=exposureroom.com/&assetId=f8470a83ede543789fc18d1556be86e9&size=md&titleColor=%23ffffff" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="True" /><param name="wmode" value="opaque" /></object><div><div class="viewOnXRDiv"><a href="http://exposureroom.com/f8470a83ede543789fc18d1556be86e9" class="viewOnXRLink" title="Lying Down trailer by Tony Wilkes - View it on ExposureRoom" target="_blank">View on ExposureRoom</a></div></div>
</body></center>
</html>
Hi All Wondered if anyone could help me. I have a website, which I am able to create a blog page with, which I have done. I do not like any of the layouts/templates that are provided for this service and I want to stream the information that I blog to a section/div tag of my actual site and leave the actual blog page non visable to viewers. Is this possible using only html? or will I have to delete this blog page and set up another with the likes of joomla or wordpress? Cheers Saz Hello, I wonder if it is possible or it will be possible to make the webcam (Audio/Video) streaming with her website as a webcam chat without Flash or Silverlight but with HTML5 or perhaps JavaScript. Or will it always must pass through Flash or Silverlight to make a webcam chat Thanks in advance Hello everyone. =) I'm still very much a n00b when it comes to web development, so there's still a LOT I don't know how to do (and I can't even search Google very well, 'cuz I don't know the correct terms). That said...I apologize if I put this in the wrong section; I'm not really even sure where this topic belongs. =\ If you have any coding knowledge, or know a website that can help me, I'd greatly appreciate it. Thanks in advance!! 1) I really like music, so I'd love to have an interactive Billboard music chart on my site. By "interactive", I mean "you get a list of the top 40 (or top 100) songs, and if you click the songs, you'll hear them play". I'm thinking that, in order for this to work, I need to find a online radio site or something. But I know nothing about streaming websites...so I'm not even sure if there already is a "Top 40s Billboard" station, or a "Top R&B/Hip-Hop" station. And if those stations do exist, I don't know how to add them to my website. Would I need something called RSS/XML??? What do I do??? 2) I want to add a sports ticker to my website. I'd love for it to be similar to this (I wish I could just pay them for the ticker, but I can't afford $130/month. So I'm wondering if there's a way to produce the same [or a somewhat similar] effect for free?): http://sports.tickertech.com/ As you can see, the ticker is quite expansive. You can get info on national sports news (Michael Vick, etc.) and you can also get specific news based on individual sports teams (San Francisco 49ers, Detroit Tigers, etc.) You can also click on each individual link (located on the left side) and read more information on each topic; it's really really cool. <3 Is there anyway to reproduce this effect? If that ticker involves too much work, then how do I at least get the NATIONAL/MAJOR sports news for each sports category (NFL, NHL, NBA, MLB, etc.) to show up? 3) Also, what's the best way to keep my sports ticker and music charts up-to-date (or even better, have it update by itself)? Would I need to use RSS/XML to do it??? I want to add a radio selector to my site...to allow people to choose what feed they would like to listen to. I have see a php mod which I could use from a phpnuke mod but I wanted it in simple html if possible. I want a drop down menu with different station names, and when you choose one it loads the relevant stream in a media applet above/below. If you go to my test page you can see what i mean: http://vivalefrench.com/tester.html But I dont see how to target the links to the media player? I bought a cheap flash script that looks good but it doesnt work with asx files, I would have open them to look for the mms file and I dont want to overstep my mark as Im using feeds from another site. Not sure if I am allowed to do such a thing. So a simple html drop down menu to choose stations would be idea. If you right click on the test page, you can view the source to see how its been put together.. There is always a solution but I havent a clue with it Im trying to create a site that will constantly update in real time based on my activity. For example, if i update my facebook status or add a new twitter update at 5:30 then the site will add to the top of the list Robin updated her facebook status at 5:30. and the list will continue to build. conplicated... but any thoughts? thanks for the help. Hello, I am updating an old website with no media player. They had one but it became damaged. $25,000 right down the tube, (not my money!). Anyway, if you look at the page I’m talking about... http://rockwindow.com/video_pages/viedo_01.htm you will understand what I'm talking about. I used an image of the old player. I was wondering if I was to use <map> attribute around the control buttons what the code would be for a link to do: play, pause & stop. If you right click the video, those options are in the menu. How do I link to a code for a control like that. Any help, I will appreciate very very much. Thank you! Hey all, Is it possible to shut down video screen automatically after displaying the video? I mean, after video is over, is it possible to hide the video screen? ( I tried to use embed tag... <embed src="myVideo" autostart="true" /> ??) Thanks, Doron Hello, first post. HELLO! my video widget playlist on my index is a different size on my index.php but the correct size throughout the rest of my site. Its quite annoying, can anyone shed any light on this issue? thanks. http://www.brewrecords.net HTML Code: <?php get_header(); ?>
<div id="content">
<div id="homepagetop">
<div class="textbanner">
<?php $recent = new WP_Query("cat=" .ot_option('hp_top_cat'). "&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<?php endwhile; ?>
</div>
<div id="homeslider">
<?php include(TEMPLATEPATH."/includes/slider.php");?>
</div>
<div class="homewidgets">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Top Right') ) : ?>
<div class="widget">
<h4>Widget Area</h4>
<p>This section is widgetized. To add widgets here, go to the <a href="<?php echo admin_url(); ?>widgets.php">Widgets</a> panel in your WordPress admin, and add the widgets you would like to <strong>Homepage Top Right</strong>.</p>
<p><small>*This message will be overwritten after widgets have been added</small></p>
</div>
<?php endif; ?>
</div>
</div>
<div id="homepage">
<?php include(TEMPLATEPATH."/sidebar_left.php");?>
<div class="homepagemid">
<h3><?php echo cat_id_to_name(ot_option('hp_mid_cat')); ?></h3>
<?php $recent = new WP_Query("cat=" .ot_option('hp_mid_cat'). "&showposts=" .ot_option('hp_mid_num') ); while($recent->have_posts()) : $recent->the_post();?>
<div class="homepagecontent">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-thumbnail' ); ?></a>
<h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
</div>
<?php include(TEMPLATEPATH."/sidebar_right.php");?>
</div>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>
|
|||||||