I have an html <video> tag with .ogg, .mp4 and .webm type of videos. I've also edited the .htaccess with the appropriate AddFile types. My video is supposed to play in the background. In Chrome, IE and Opera works correctly but in Firefox not. Here is my code:
<div class = "bgvid">
<video autoplay loop preload = "metadata" poster="images/pathos-lounge-restaurant.jpg" id="bgvid">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.mp4" type="video/mp4">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.webm" type="video/webm">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.ogv" type="video/ogg">
</video>
</div>
And here is my page: http://freebeachbar.gr/pathos/
Two things
You have class hidden for container and lounge
and you have overflow:hidden for media all
You might wan't to remove that
Related
I'm testing an EPUB with audio file, fixed layout format, in an 2012 iPad 2. I want to the audio file "autoplays" in one specific page with some text on it. After some tests, I've get some answers:
1.- Autoplay DOES work, when in the package.opf I set the values "landscape", "portrait", "both" and "auto" in the "rendition:spread" property; which create a synthetic spread for rendering the content (which, is when the system creates two adjacent pages simultaneously on the device screen).
2.- Autoplay DOESN'T work when I set the value "none", which is what I want to use in the mentioned property in the previous point (I don't want to use a "synthetic spread" in my design).
This is the code i'm trying in the xhtml file, the sound part:
<audio autoplay="autoplay" loop="loop">
<source src="../audio/latidos.ogg" type="audio/ogg" />
<source src="../audio/latidos.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
and this is the "meta" part about spread and layout of the book design in the package.opf file:
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">none</meta>
Any comments about this issue? Perhaps the model of my iPad?
Is there a way to specify the poster or get the preview image of the video from the azure media player as mentioned on this page
http://amsplayer.azurewebsites.net/azuremediaplayer.html
Thanks for any help.
Use the "poster" attribute on the video tag.
For example:
<video id="azuremediaplayer" poster="~/Content/img/preview.png" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls width="640" height="480" data-setup='{"logo": { "enabled": false}, "nativeControlsForTouch": false}' tabindex="0">
<source src="{video_src}" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
If you don't specify a value for the poster attribute then the player will use the first frame of the source video as the poster.
An audio for the web which is fully cross-browser needs some different formats to work on all browsers. Commonly I see that people use mp4 and ogg. But I want to be completely sure. Therefore I added webm and wav. Is this completely needed? Especially wav files as they are so heavy. This question should be thought thinking about performance for a responsive site.
This is my html example:
<audio controls="controls" data-music="1">
<source src="http://example.webm" type="audio/webm" />
<source src="http://example.mp4" type="audio/mpeg" />
<source src="http://example.ogg" type="audio/ogg" />
<source src="http://example.wav" type="audio/wav" />
</audio>
Will this all be downloaded and affect the global performance?
Additionally, does the order matter of the type of formats?
Please how I can play sound in specific positions...
Exemple : data-2000 and another data-5000
This is my code :
<div data-1000="" data-2000="">
<audio id="audio01" preload="auto"/>
<source src="audio1.ogg" type="audio/ogg">
<source src="audio1.mp3" type="audio/mpeg">
</audio>
</div>
<div data-2000="" data-3000="">
<audio id="audio02" preload="auto"/>
<source src="audio2.ogg" type="audio/ogg">
<source src="audio2.mp3" type="audio/mpeg">
</audio>
</div>
Example website use sound on specific data: http://www.cabletv.com/the-walking-dead
I use Skrollr JS
Thanks
I have an audio object with two sources, in M4A and OGG formats.
The code is as follows:
<audio id="audio1" controls="controls" preload="none">
<source src="music.m4a" />
<source src="music.ogg" />
</audio>
I can then call document.getElementById('audio1').play() and it starts playing.
It works well in all browsers. But in Safari, it only works if the M4A file is the first source.
I.e. if I have this code with OGG file first:
<audio id="audio1" controls="controls" preload="none">
<source src="music.ogg" />
<source src="music.m4a" />
</audio>
Safari won't react to the play() JavaScript call, only to the mouse click on the play button.
Is there any solution to this apart from always putting the M4A file first?
Thanks!
Have you tried telling the browser what MIME type you're using.
Use "audio/mp4" as the MIME type (don't forget to add it to your .htaccess)
<audio id="audio1" controls="controls" preload="none">
<source src="music.oga" type="audio/ogg" />
<source src="music.m4a" type="audio/mp4" />
</audio>
Maybe try adding an EMPTY.m4a file first? .5 sec of no noise?
I have been having trouble with .ogg on safari myself.
I never thought to try another type of file 1st.
This will probably fix my problem. Thanks.
My problem was gaps in .mps files. So I switched to .ogg.
Adding a default blank .m4a might help your problem.
I'm curios to know if this works, post either way.