Is there currently any support for streaming audio via RTMP using either native HTML5 or Flash fallback with MediaElement? I saw what looked like support for Video using the flashStreamer option in the video tag 'data-mejsoptions' attribute.
I know your question is a year old but I'm going to try and answer it in the hope I can save someone the time and trouble of figuring it out.
As far as I'm aware RTMP is not supported in any of the native HTML5 audio/video elements.
Luckily mediaelement.js seems to support this protocol in here Flash version
It seems this protocol is used more commonly for videos. That is why you'll have to provide a few extra arguments to make a RTMP stream work.
Here is how I got a RTMP audio stream working with mediaelement.js:
JavaScript:
$('video,audio').mediaelementplayer({
audioWidth: 500,
features: ['playpause','current', 'progress', 'volume'],
pluginVars: 'isvideo=true',
//Example rtmp://my-streaming-service.com/specific-stream
flashStreamer: "rtmp://<base-url+path>",
mode:'shim'
});
HTML:
<audio preload="none" controls="controls">
<!-- Example rtmp://my-streaming-service.com/specific-stream/64.stream -->
<source src="rtmp://<base-url+path>/<filename>" type="video/mp4">
</audio>
Related
I have uploaded my MP4 files to Azure then converted them to H264 1080p Streaming format.
When I try to play it from the player, it gives me the following error:
The same for all browsers. When I download the processed MP4 files from the underlying storage account, they play just fine.
This is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link href="//amp.azure.net/libs/amp/1.8.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/1.8.1/azuremediaplayer.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<video id="vid1" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls width="640" height="400" data-setup='{"logo": { "enabled": false }, "controls": true, "autoplay": false, "nativeControlsForTouch": true}'>
<source src="https://mediatest12.streaming.mediaservices.windows.net/96fe4710-a1e2-4384-a849-93a0fceb1d40/big_buck_bunny_1280x720_30mb.ism/manifest(format=mpd-time-csf)" 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>
<video id="vid2" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls width="640" height="400" data-setup='{"logo": { "enabled": false }, "controls": true, "autoplay": false, "nativeControlsForTouch": true}'>
<source src="https://igmediawe.streaming.mediaservices.windows.net/27472dba-a353-429e-b305-2879e32f65ea/wi005-packing_ecomm_pack_scan.ism/manifest(format=mpd-time-csf)"
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>
</body>
</html>
The first video works, the other doesn't.
Here is the page I'm trying to use it on: the exact same player settings work with another video:
https://opreports.azurewebsites.net/media.html
What am I doing wrong? I get the same error if I try to play it from within the Azure Portal as well.
The originally uploaded source video:
MP4
H.264/MPEG-4 AVC
1680 x 924
30fps
No audio stream
I got help from Microsoft support eventually, quoting their answer below.
"The issue is that the second video is video-only. According to the bottom of http://amp.azure.net/libs/amp/latest/docs/features.html, Azure Media Player does not support audio-only or video-only files. They must contain both audio and video. The reason for this is the support for certain features within the Media Source Extensions in most browsers and how we implement them.
Because of this we included a feature in the Azure Media Services Explorer (http://aka.ms/amse) that allows you to add a silent audio track to a video-only source file or a black screen to an audio-only file:
To get to this, right click on the video you want to encode, choose Encode → Encode asset(s) with Media Encoder Standard (MES)... → Advanced tab."
I have video sharing website.Where I am using
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
But its make my website slow .Also the user cannot enjoy the video on slow net.So I want to create RSTP TO disply video using stream .
I am using NodeJS as frontend .Do you have any idea how can I use ?
I have published a video to Azure Media Services and I am trying to open that video on an SSL-enabled website using the new Azure Media Player.
I have added a video tag to my page as per the documentation, i.e:
<video id="vid1" class="azuremediaplayer amp-default-skin" controls width="640" height="400" poster="poster.jpg" data-setup='{"logo": { "enabled": false}, "nativeControlsForTouch": false}'>
<source src="http://example.origin.mediaservices.windows.net/.../example.ism/manifest" 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>
However when I load the page Chrome and Firefox throw a Mixed Content error:
I believe this is due to the DASH url that is generated and processed by Azure Media Player. I can get the video to load and play if I change the video tag to the following:
<video id="vid1" class="azuremediaplayer amp-default-skin" controls width="640" height="400" poster="poster.jpg" data-setup='{"logo": { "enabled": false}, "nativeControlsForTouch": false}'>
<source src="http://example.origin.mediaservices.windows.net/.../example.ism/manifest" type="application/vnd.ms-sstr+xml" data-setup='{"streamingFormats": ["SMOOTH", "HLS-V3", "HLS-V4"] }' />
<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>
However this seems to force Azure Media Player into using Flash and the user experience is not all that great (slow to load, jumpy playback, etc).
Is it possible to stream a video that is hosted in Azure Media Services via a DASH streaming url to a secure website using Azure Media Player?
It turns out that streaming endpoints that were created before September 11, 2014 do not support streaming over ssl, however streaming endpoints that were created on or after September 11, 2014 do support streaming over ssl.
The streaming endpoint I was using was created at the start of 2014 and therefore did not support ssl. The solution was to create a new streaming endpoint and use its publish url instead.
Be aware that if you need to create a new streaming endpoint like I did you will probably want to turn off your old endpoint and remove the streaming units associated with it so you don't incur unnecessary costs.
I have a page where I display some audio .ogg/.mp3-files for listening in the browser (it is purchased products that are being displayed on a "receipt"-page).
The files are super in Chrome, Opera, Safari and Firefox and I can play them, pause, restart and everything.
Today I use a quick fix and forces the browser if IE to simulate IE7 version and then it works, but is of course prtty ugly-looking. I can also skip the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> and use compatibility view and get same result.
In IE10 Win7 (got latest version) this is displayed and I cannot even press the play-button: http://snag.gy/kANRy.jpg
You can have a look for yourself at: http://energyshop.se/testry.php/
Also, myclient uses an older version of IE and its the same for her.
I can also add that if Ihit f12 and switch to compatibility view of IE10 the audio WILL be working and im able to listen to them - but not as soon as I unclick compatibility view.
This is the code used for the audio (TEST code) (and heres: http://pastebin.com/ENrPj8cx a full code version of my pdt.php):
<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
</head>
<body>
<?php
echo("<audio id='testry' controls preload='auto'>");
echo("<source src='/1.mp3' />");
echo("<source src='1.mp3' />");
echo("<source src='1.mp3' />");
echo("<source src='/1.mp3' type='audio/mpeg' />");
echo("<source src='1.mp3' type='audio/mpeg' />");
echo("<source src='/1.mp3' type='audio/mp3' />");
echo("<source src='1.mp3' type='audio/mp3' />");
echo("Your browser does not support the audio tag.");
echo("</audio>");
?>
</body>
</html>
and here is my .htaccess: http://pastebin.com/2mz8QwEV
Also, here is my head, meta and doctype for the page (its a pdt.php)
<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
I know IE9+ supports .mp3 and I have it updated so whats up? Anyone?
ive seen a very similar issue to this one before. specifically dealing with .ogg and .mp3 file types in IE9 + html5 audio.
problem was resolved by tweaking the MIME type declarations in .htaccess file while the filetypes worked in other browsers just fine - IE9 alone was very picky about what it could work with...
going to investigate further - more info soon.
I am curious what is your hosting situation? (win / linux - self hosted / shared?) i initially assumed shared linux because of the php files as this was the most common scenario.
EDIT:
depending on the hosting situation - (you own the hardware / VPS / or are using shared hosting) some people have found their windows based hosting providers web.config files are in fact overwriting their mime type declarations but i was unable to verfiy as my hosting situation is linux based
after a bit of searching i found a few other documented cases of this issue and some other solutions involved:
for shared / hosted sites, this developer converted his mp3 files to .m4a which had working mime types within IE9
additionally if you are interested this Microsoft Developer Network article - details a bit of the reason why IE9 behaves this way
this stack question is similar to your issue on an Apache Tomcat server
Please check which of this formats are supported on IE: http://textopia.org/androidsoundformats.html. You could be able to inspect with the built-in developer tools and see how it's achieved.
Here, Microsoft Offers a Guide to Using HTML5 Audio.
And here about Unlocking the power of HTML5 .
just to add for completeness, add to your audio element the attribute, type and set this as 'mp3' or 'audio/mpeg' not sure which, but at least then you know for sure the page is clearly informing the borwser the type of the resource you are linking to.
If that doesn't work there aren't other options in HTML to define such resources and I would then be looking at support from IE10 as the issue?
I think this is due to your server not sending back the correct content type for the URLs you provide.
http://energyshop.se/testry.php/1.mp3 gives content type:
Content-Type: text/html; charset=UTF-8
http://energyshop.se/1.mp3 gives content type:
Content-Type: application/octet-stream
I see that you posted your .htaccess file at Why doesn't the audio tag work in IE?
You likely have the octet-stream type set to prompt downloads. Try setting it to "audio/mpeg" instead, and only set "/1.mp3" as the source on the audio tag.
I have page where I am allowing myusers to listen music online everything works just fine in pc but when I try to check in nokia symbian, blackberry Android nothing plays
I am using flash MP3 player and my simple codes are here.
I am interested in playing in all mobiles as my main target is mobile users so any idea how can I play them all even in old nokia symbian mobiles will be a great help
All mobiles are supporting JavaScript as I can browse complicated websites with nokia blackberry and Android but only issue is MP3. Any suggestion to play in all mobile phone is welcome.
My live site http://way2enjoy.com/rstadmin/listenmusicmobile/1528\
My code
<object type="application/x-shockwave-flash" name="audioplayer_1" style="outline: none" data="http://way2enjoy.com/js/player/player.swf" width="500" height="24" id="audioplayer_1"><param name="wmode" value="opaque"><param name="menu" value="false"><param name="flashvars" value="soundFile=uploads/userfiles/201206/1120_56_584iq.preview.mp3&titles=Hanuman Chalisa by Gulshan Kumar&artists=claim_your_money&autostart=yes&loop=yes&playerID=audioplayer_1"></object><script type="text/javascript" src="http://way2enjoy.com/js/player/audio-player.js"></script><script type="text/javascript">
$(document).ready(function(){
AudioPlayer.setup("http://way2enjoy.com/js/player/player.swf", {
width: 500
});
AudioPlayer.embed("audioplayer_1", {
soundFile: "http://way2enjoy.com/uploads/userfiles/201206/1120_56_584iq.preview.mp3",
titles: "Hanuman Chalisa by Gulshan Kumar",
artists: "claim_your_money",
autostart: "yes",
loop: "yes"
});
});
</script>
I am interested in playing in mobile only but I want all mobiles including older nokia symbian etc.
Newest Android phones don't have Flash support anymore...
Also the Flash player needs to support mp3 (I don't know if that is default)
You should try different solutions for different phones. You can do this by checking if the object is support (as last resort the User Agent string).