Keyword

Using HTML5 video with multiple src attributes

  • alisamii
  • alisamii's Avatar Topic Author
  • Offline
  • New Member
More
10 years 6 months ago #53476 by alisamii
I am trying to embed about 140 videos on my site and provide various src files for different browsers, specifically .mp4, .webm, .ogv and fallback to .f4v

The documentation doesn't provide detailed guidelines about how best to use the AllVideoPlay for HTML5 video with fallback to flash.

Under standard html5 syntax, I would use something like this:
<video controls poster="POSTER" width="720" height="306">
	<source type="video/mp4" src="VIDEOFILE.mp4">
	<source type="video/webm" src="VIDEOFILE.webm">
	<source type="video/ogg" src="VIDEOFILE.ogg">
	<embed src="VIDEOFILE.f4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>

or
<video controls poster="POSTER" width="720" height="306">
	<source src="VIDEOFILE.mp4" type="video/mp4" />
	<source src="VIDEOFILE.webm" type="video/webm" />
	<source src="VIDEOFILE.ogv" type="video/ogg" />
	<object width="720" height="306" type="application/x-shockwave-flash" data="VIDEOFILE.f4v">
		<param name="movie" value="VIDEOFILE.f4v" />
		<param name="flashvars" value="controlbar=over&amp;image=POSTER.jpg&amp;file=VIDEOFILE.f4v" />
		<!-- fallback image. note the title field below, put the title of the video there -->
		<img src="POSTER.jpg" width="640" height="360" alt="VIDEOTITLE" title="VIDEOTITLE" />
	</object>
</video>

In the documentation, I see that I can embed each individual video format.

{mp4}our-family-trips/paris{/mp4}
{webm}our-family-trips/paris{/webm}
{ogv}our-family-trips/paris{/ogv}
{f4v}our-family-trips/paris{/f4v}

However I don't see how I can embed the fallback structure I have above (.mp4 first, then .webm, then .ogv and if the video tag is not supported by the browser, the .f4v).

How do I implement the above?

Also, how do I specify the posterframe for each video, and adjust the player size on a per-video basis as each video has a different size/aspect ratio?

Thank you,

Ali

Please Log in or Create an account to join the conversation.

More
10 years 6 months ago #53477 by Katia
The video file should be inside images file in your Media Manager.
In order to give different dimensions in each video provider please check AllVideos documentation (check the Custom options per video paragraph).

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • alisamii
  • alisamii's Avatar Topic Author
  • Offline
  • New Member
More
10 years 6 months ago #53478 by alisamii
Hi Katia, you didn't answer my question at all. My question had absolutely nothing to do with where the video files should be placed on my server.

If I want to embed the video with fallbacks so that it can be properly played on different browsers and eventually support flash fallback as well, how do I do it?

If I have 1 video, called "video" but encoded as .mp4, .webm, .ogv and .f4v, and I want the plugin to display the version that is supported by the users browser, how do I do that?

HTML5's <video> tag allows me to define multiple sources and the one supported by the browser is downloaded to the client.

AllVideos seems to support many video formats, but I have not found any documentation about how I can use multiple sources for the same video file.

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum