Multi-File Media Embed

HMMMM I wrote a big long response to this but it didn't come through for some reason.

2 quick points.

I am not going to tell you what you can or can't do, but what I will tell you is what the majority of people are doing. And that is to not use proprietary formats such as quicktime (.mov) or windows media (.wmv). The reason being that some companies (namely apple, and adobe) are embracing open source formats such as MPEG-4 and h.264, and so is the industry (with the inclusion of h.264 in blu-ray and HD-DVD formats). They key here is that if you make your format available in a format that is easily transferable or downloadable to a large ubiquitous player like Flash you will have more people looking at your content.

With that said, I only publish MPEG-4 with the h.264 codec. Unfortunately although adobe decided to let the cat out of the bag and support both the mpeg-4 format and the h.264 codec they didn't include RTSP support so I embed quicktime (which can play mpeg-4 with the h.264 codec). I also include a link that can be used to view the RTSP stream that can be viewed by open source players like VideoLan (VLC), and even windows media player (with envivio, although it's a bit kludgey).

So back to my point, I solved the issue by using a tabbed UI, and embedding different formats/bandwidths. Namely Quicktime and Flash Player.

I used jquery tabs:
http://stilbuero.de/jquery/tabs/

I used qtobject.js to detect and embed quicktime:
http://blog.deconcept.com/code/qtobject/qtobject.html

And swfobject.js to detect and embed flash player (the new one by geoff stearns and bobby van der sluis):
http://www.swffix.org
Better yet:
http://code.google.com/p/swfobject/downloads/list

I also created an additional field for the "video type" called "stream_url". I also created a node.video.tpl.php that is loaded when the node type is video. What is inserted into this "stream_url" is just the main meat of the streams. So for example if the FULL url of one of the media file is:
rtsp://video.example.com:554/this_is_my_media_file_lan.mp4

The only thing that is input into the stream url is:
this_is_my_media_file

So everything around it is portable in a sense. If I decide I want to publish HD video, or want to move the streams to a different URL or also do some load balancing by pointing the end user to the proper streaming server, than I can.

You need to include this in the head of your page.tpl.php file (yes it's a lot of javascript but it all works together):

<?php if ($node->type == 'video' or $node->field_video_support[0][value] == "yes") { ?>
		<script type="text/javascript" src="/js/qtobject.js"></script>
		<script type="text/javascript" src="/js/swfobject.js"></script>
		<script src="/js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
		<script src="/js/jquery.history_remote.pack.js" type="text/javascript"></script>
		<script src="/js/jquery.tabs.pack.js" type="text/javascript"></script>
<?php } ?>

Note: I added a field in my page node types to turn on or off video support so that I wasn't requiring a user to load all of the JS for every page even when I wasn't building the UI.

Below is an example of the node.video.tpl.php file (url's have been modified):

	    <div id="video_main_feature">
		<ul>
			
			<li><a href="#dsl"><span>DSL</span></a></li>
			<li><a href="#lan"><span>LAN/T1</span></a></li>
			<li><a href="#flash"><span>Flash/Podcast</span></a></li>
		</ul>
           
            <div id="dsl">
                <script type="text/javascript">
			// <![CDATA[
				var myQTObject = new QTObject("/images/video/<?php print $field_stream_url[0]['view']; ?>_bb_dsl.jpg", "dsl", "480", "376");
				myQTObject.addParam("href", "rtsp://video.example.com:554/<?php print $field_stream_url[0]['view']; ?>_dsl.mp4");
				myQTObject.addParam("target", "myself");
				myQTObject.addParam("controller", "false");
				myQTObject.addParam("enablejavascript", "true");
				myQTObject.addParam("autostart", "false");
				myQTObject.write();
			
			// ]]>
		    </script>
		    <div class="media_link">Link to Video: <a href="rtsp://video.example.com:554/<?php print $field_stream_url[0]['view']; ?>_dsl.mp4">rtsp://video.example.com:554/<?php print $field_stream_url[0]['view']; ?>_dsl.mp4</a></div>
	    </div>
	     <div id="lan">
                <script type="text/javascript">
			// <![CDATA[
				var myQTObject = new QTObject("/images/video/<?php print $field_stream_url[0]['view']; ?>_bb_lan.jpg", "lan", "640", "496");
				myQTObject.addParam("href", "rtsp://video.example.com:554/<?php print $field_stream_url[0]['view']; ?>_lan.mp4");
				myQTObject.addParam("target", "myself");
				myQTObject.addParam("controller", "false");
				myQTObject.addParam("enablejavascript", "true");
				myQTObject.addParam("autostart", "false");
				myQTObject.write();
			
			// ]]>
		    </script>
		    <div class="media_link">Link to Video: <a href="rtsp://video.example.com:554/<?php print $field_stream_url[0]['view']; ?>_lan.mp4">rtsp://video.example.com:554/<?php print $field_stream_url[0]['view']; ?>_lan.mp4</a></div>
            </div>
	    <div id="flash">
		<script type="text/javascript">
			var flashvars = {};
			flashvars.v = "http://video.example.com/podcasts/<?php print $field_stream_url[0]['view']; ?>_podcast.flv";
			flashvars.skin_set = "/images/SkinUnderPlayStopSeekFullVol.swf";
			var params = {};
			params.wmode = "transparent";
			params.allowfullscreen = "true";
			var attributes = {};
			swfobject.embedSWF("/images/flash_vid.swf", "flash_vid", "320", "280", "9.0.115", "/images/expressInstall.swf", flashvars, params, attributes);
		</script>
		<div id="flash_vid">
		<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
		</a>
		</div>
		    <p class="note"><b>Note:</b> To view the podcast MP4 video's in flash you may be required to install <a href="http://www.adobe.com/products/flashplayer/">the latest 9.0.115 version of Adobe Flash</a>.</p>
            </div>
   </div>
<div class="float_clear"></div>

As you can see from the example above I have 3 bandwidth/formats, and in the working example below it loads them into a tabbed interface.

btw I used the video module since it included the ability to do "podcasts" and attached the main "video" which is a podcast to an rss feed correctly so iTunes or other "podcast" downloadable clients could parse the attached video correctly.

You can see an example of all of this working here:
http://www.engr.sjsu.edu/about/video

tgshultz,

First things first, do you have the video module installed? Second do you have CCK installed? Do you have Text enabled for CCK? (that is all you need from CCK, I have others enabled for custom date fields and such, but it's not necessary for accomplishing this.

If you go to Administer > Content Types > Video

Click on Add Field at the top, and name the field "stream_url", and it just needs to be a Text field, so select that. Click Create Field, and everything can be left to the default settings, unless of course you are bothered by the name "stream_url" when you enter video nodes. After you are done click Save Field Settings.

When you enter a video node (Create Content > Video), you should now see a field in the form, that is called "stream_url" this is what the custom node.tpl.php I outlined above uses. If you named it something else, you will have to modify the variable in the template.

Also note that I didn't explain how to create a custom node.tpl.php or an if statement for "video" node types (which is what I do), so I assume you know how to do that.

I am glad this is useful to someone.

Please also note! That I essentially have 4 ways to view my media files and only 3 actual different media files. One is a LAN encoding and it lives on a streaming server and has a quicktime embed. The second is a DSL encoding and it also lives on the streaming server and has a quicktime embed. The third is a podcast which I embed via this method into a flash applet, and it sits on an HTTP server, and the FULL url also gets input into the "Video File" field along with the other attributes, so the video module can build it into a video podcast RSS feed.

It's the same as the above page.tpl.php JS if statement, except that it's in the node.tpl.php file, in-between the content div. Like so:

<div class="content">
<?php if ($node->type == 'video' or $node->field_video_support[0][value] == "yes") { ?>
<?php // display UI 
?>
<?php }?>
</div>

I actually did something like this:

<div class="content">
    <?php if($node->type == "video") { include "node_video_type.tpl.php"; } ?>
</div>

Doing that basically cleans up the code for node.tpl.php. Please note that I still have the title, body, links, etc. that are output by default via the node api and therefore what the video module uses to include other info about the "podcast". I just modified the view output with the above.