video embedding

[VassilisP]

Hello people,

I would like to embed a video in my website, not just add a link to YouTube. I used Freemake video converter to export my video in HTML5 (source code was also produced), I uploaded the required files, added the video module in my page and pasted the source code in the appropriate field. The play button was inactive. Here is the code I pasted :

<div style="position: relative; width: 480px;">
<video id=0 controls width=480 height=272>
<source src="T5000-Video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="T5000-Video.webm" type='video/webm' >
<source src="T5000-Video.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<a href="http://www.freemake.com/"><img alt="Made with Freemake video software" src="http://www.freemake.com/favicon.ico" style="background-color: transparent;position: absolute;top: 20px;right: 20px;z-index: 9999;border-style: none;opacity:0.6;filter:alpha(opacity=60);"></img></a>
</div>

Note that in the htm file that was created from freemake the video was playing fine. I thought that the source was wrong (the underlined part in the above text) so I changed it to the path showing in the panel (http://asisnet.gr/data/documents/T5000_video.mp4) but it didn't work also. I then tried to use a flash video, did everything from the beggining but again playback was not possible. Then I used another resource to create the source code (http://v4e.thewikies.com/), where I entered the video path and opted for a flash video. I used the code provided and the result was "...the file can not be found...". Again no playback but this time a message that the file was not found.This is the code used :

<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http//asisnet.gr/data/documents/T5000_video.mp4','autoPlay':false}]}" />
<span title="No video playback capabilities, please download the video below"></span>
</object>

I then used as source path the vendors address and the video was playing fine!!! What gives? Why couldn't I use the file that I uploaded in my site?

Thank you in advance

 

[dave-ha]

Hi VassilisP,

Welcome to this forum!

With HTML5 video I experienced a similar problem recently. The video file was obviously there but the browser showed that it found nothing. It worked after I started using the codec that my browser could handle.

First, view the page with a different browser. Then try to find out the codecs that your browser can handle and select it accordingly when converting your video file with Freemake. There is a nice introduction in HTML5 video here: http://diveintohtml5.info/video.html.

If it still does not work then try a combination of these:

- Use the correct path in all of your source tags and harmonise the syntax (removing the spaces and slashes at the end of the tag), like:

<source src="/data/documents/T5000-Video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="/data/documents/T5000-Video.webm" type="video/webm">
<source src="/data/documents/T5000-Video.mp4" type="video/mp4">

- Change your video tag to this:

<video id="0" controls="controls" width="480" height="272">

- Add the codec specifications to your HTML source tag, e.g.:

<source src="/data/documents/T5000-Video.m4v"" type="video/m4v; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;"></source>

- Advise your server to send the MIME types in the Content-Type HTTP header, e.g. on Apache add this to your htaccess file:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Optionally, you could make use of the poster attribute in order to show a picture of the video to the users while they wait for it to load:

<video id="0" controls="controls" poster="/data/documents/T5000-Video.png" width="480" height="272">

Did one of these help to solve the issue?