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.
Related
I have some media files hosted on AWS S3. I want to set up a redirect from my own website to the files, and use the url link from my own website as src for the media player, so that I can better track the number of requests for the files from my own site.
In other words, instead of using
<audio style="width: 100%;" controls="controls">
<source src="https://s3.amazonaws.com/mybucket/audiofile.mp3“ />
</audio>
I want to use
<audio style="width: 100%;" controls="controls">
<source src="https://my_own_website.com/tracks/audiofile.mp3“ />
</audio>
and have it point to https://s3.amazonaws.com/mybucket/audiofile.mp3 and play the file.
What I have tried:
Redirect on my front end (using react and react-router). I tried setting up a redirect route like so:
<Route exact={true} path="/tracks/:id" component={(props) => {
const id = props.match.params.id;
window.location.replace(`https://s3.amazonaws.com/soundwiseinc/soundcasts/${id}`);
}} />
Redirect on my back end (using node.js and express). I tried to redirect like the following:
app.get('/tracks/:id', (request, response) => {
const path = String(request.path).slice(8);
console.log('path: ', path);
response.redirect(200, https://s3.amazonaws.com/mybucket/${path});
});
But neither of them worked. The mp3 wouldn't play. And the console error says the source is not valid.
Create a server side page for ex: playmedia.php & pass the cloud file name to that page.
Add your tracking code in the page & save analytics data to database.
Stream MP3 from S3 using Amazon S3 Stream Wrapper from playmedia.php
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 ?
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>
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).