the webpage http://mediaelementjs.com/#installation read "player options" for audio it states width and height on lines 11 and 13 this however does not do anything to the players width or height.
// width of audio player
audioWidth: 400,
// height of audio player
audioHeight: 30
is this a bug? I know I can change everything manually through css but as its listed as an option I am curious if I am doing something wrong.
I can't speak to those JS parameters, but there's at least some basic control using the width="__" and height="__" parameters directly applied to the <audio> tag:
<audio src="audio-file.mp3" width="100%" height="30px" controls="controls"></audio>
The author of MediaElement.js uses those parameters when rendering the responsive player, for example.
Related
In the code below I am playing a 60 second fragment from a 30 minute MP3 file (#t=60,180 - starts at 60 seconds, stops playing at 180 seconds). This uses the Media Fragment URI specification.
The HTML5 Audio player however show the progress bar with the full 30 minutes duration.
Three Questions:
1) Apart from hiding the progress bar completely, is there a way to only show the three minutes I want in the progress bar. (Letting people fast forward & rewind but not go beyond the three minutes?)
2) Is there a way to only stream these three minutes rather than having to start loading in the entire MP3 file and wasting bandwidth?
3) If (1) is the only option, how do you hide the progress bar and also the total time length variable?
<figure>
<figcaption>Test Player</figcaption>
<audio
controls
src="/test.mp3#t=60,180 id="stream" style=" width:500px;>
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>
The only way you could potentially achieve something like this is by using Javascript. However, the "duration" attribute is read-only and cannot be modified.
The best thing to do in this case would be to edit the audio file and cut the 3 minutes you want by using an online tool or a program like ffmpeg.
You can hide the controls bar by simply omitting the 'controls' attribute from the audio tag. e.g.:
<audio autoplay="" name="media"><source src="/test.mp3" type="audio/mpeg"></audio>
I have a flash object I need to embed on my tumblr blog (Billy's audio player) and the embed works fine, except that I need to click a white play button before the object works:
(this is in Chrome; there is a similar play button on Edge)
However, other websites don't have this play button over the widget, including the widget's own webpage and the bottom left of this blog.
This is the embed code, taken directly from the Billy's audio player webpage (with added newlines for readability):
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1"
quality="high" wmode="transparent" width="200" height="10" name="billy"
align="middle" type="application/x-shockwave-flash" title="Adobe Flash Player">
Is there something I can add to make the flash object run automatically? I doubt it's a browser issue, as it works on some other webpages, and other viewers also see the white play button.
However, other websites don't have this play button... including the
widget's own webpage.
SWF and HTML must be in the same exact location (ie: web folder).
If SWF url is : http://www.sheepproductions.com/billy/billy.swf
then HTML must be : http://www.sheepproductions.com/billy/pageWithSWFembeded.html
This issue is caused by the small width/height of your SWF. Browsers assume it is a Flash advert banner and do not auto-load it. It can be fixed by either increasing SWF display size or by putting the small SWF in same location as HTML page that loads the SWF.
Also consider using HTML5 audio tag to guarantee playback of website audio even on mobile devices (they don't run Flash content within default browsers).
I want to use a Youtube video as a fullscreen background for a splash page (including sound). However there should be no controls, ability to pause, etc. It should just look like a background movie.
What is the best way to do this?
Should I be using the tag or is there some other HTML5 tag, or entirely different method I can use?
If you're ok to use JS/jQuery: http://www.seanmccambridge.com/tubular/
Also, see the source if you want to take some of the concepts: https://code.google.com/p/jquery-tubular/source/browse/trunk/js/jquery.tubular.1.0.js
If you want to use YT player, I recommend you to use Youtube Player API
Please keep in mind that you can make the player full-background size, but you can't stretch the video inside the player (so you will need to accept black stripes for different screen ratio than original ratio of the video). I recommend you to use html5 video player (maybe video.js can help you)
P.S.: #Besto's suggestion Tubular breaks Youtube's Terms of Services!
<div id="ytcon" style="overflow: hidden">
<iframe id="fullyt" src="//www.youtube.com/embed/QVr0M7WCBu4?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<script>
$("#ytcon").height($(window).height());
$("#ytcon").width($(window).width());
$("#fullyt").height($(window).height());
$("#fullyt").width($(window).width());
$(window).on('resize', function(){
$("#ytcon").height($(window).height());
$("#ytcon").width($(window).width());
$("#fullyt").height($(window).height());
$("#fullyt").width($(window).width());
});
</script>
I have a webpage with multiple tags, such as:
<audio controls="controls" preload="metadata">
<source type="audio/mpeg" src="file1.mp3"></source>
</audio>
Each tag plays a different file, and each mp3 file is fairly long (i.e. they take up to a minute to be fully downloaded).
If I have more than 4 tags, only the first 4 will be displayed in IE9. The other ones will be displayed one by one, each time one of the first 4 audio players has finished loading its audio file.
In fact, clicking on any hyperlink in the page doesn't load the appropriate HTTP resource until one of the audio players stops loading. It seems as though the audio tags set a hard limit on the number of simultaneous HTTP connections. IE9 usually has a much higher limit, so this seems strange.
Other things to note:
the audio files load and play fine by themselves
I don't need to files to be played simultaneously, I just want to have a page that shows multiple audio players for different files
I tried using different values (none | metadata | auto) for the preload attribute. 'none' hides the audio players completely in IE9,
and metadata and auto show the same problem.
this answer mentions that up to 40 players in IE9 should be okay, but I can't get beyond 4?
Any thoughts are appreciated, thanks.
Indeed there are some glitches with IE9 when the preload attribute of audio tag is set to "metadata".
Possible workaround for more responsive behavior will be:
Setting preload = "none"
Wrapping <audio> tag with an image or div with a background image
Attach "click" event to the image/div which will trigger: document.getElementById('audio1').play()
Hope it suits your needs.
I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.
On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.
Does an iFrame have seniority over all elements in a page even with z-index set, etc.?
Add wmode=transparent as param.
Html solution
<iframe title="YouTube video player"
width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0"
>
jQuery solution:
$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
In a word, yes. However Youtube videos are Flash. Flash also has seniority over the Z-order. It will overlay whether it is in an IFRAME or not.
IFRAME and Flash are "heavyweight" objects. They have their own Window Manager objects (HWND in Windows), so they are either in front of other heavyweight objects or behind them.
div, span, etc are "lightweight". That is they are drawn objects, drawn onto the Body (which is a heavyweight object), and managed by the browser, not the window manager.
As far as the operating system window manager is concerned, they are just pretty pictures drawn by the browser. That's why they cannot overlay "real" objects (or what the window manager thinks of as real).
They have to be lightweight because they would rapidly exhaust the window manager if every DIV and SPAN and A had to reserve OS resources.
If you want the Flash applet to be rendered according to the same z-index rules of any other HTML element, then you need to set the WMODE attribute for the included flash.
See:
http://www.communitymx.com/content/article.cfm?cid=E5141
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage
Is very simple, just add this parameters to your iframe url and thats it:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Good luck!
Hmm, the problem here is that I don't have control over the flash elements. I'm basically just pulling the embedded iFrame HTML from the youtube site which only contains the tags. So I can't set the WMODE attribute.
Late answer but: yes you can. Just tack ?wmode=opaque onto the yt url.
<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
To get this to work in IE (at least 7 and 8) you must add this:
<param name="wmode" value="transparent" />
I don't believe there is a way to append this to the iframe URL so your content needs to have this, probably between object tags.