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."
Related
I have embed Azure Media Player in WebView. Its working fine on android emulator and iOS simulator. Its also working fine on android real device in debug but its not working on android devices in release version. For iOS its not working on real devices in debug and release version.
Here is code sample...
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://amp.azure.net/libs/amp/2.3.6/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="https://amp.azure.net/libs/amp/2.3.6/azuremediaplayer.min.js"></script>
</head>
<body>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
<script>
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: true,
width:1000,
height: "1000",
}
myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src": "https://amssamples.streaming.mediaservices.windows.net/3b970ae0-39d5-44bd-b3a3-3136143d6435/AzureMediaServicesPromo.ism/manifest",
"type": "application/vnd.ms-sstr+xml"
}
]);
</script>
</body>
</html>;
return (
<WebView
source={{ html: htmlContent }}
/>
)
```
Your help would be greatly appreciated! Thanks!
If you are building native applications on Android, i would highly recommend that you use ExoPlayer and not AMP.
For iOS, you should also always default to use the native built in AvPlayer framework. AMP does not add much (or any) value on the iOS side, as it just hands off control to the native iOS media framework (AVPlayer) where all the processing and parsing of HLS is going to happen anyways.
Have you already tested your streams playing back in iOS in the native player? Did you pass the HLS manifest to the player and not the Smooth Streaming manifest?
I have created a http stream with libvlc. See the following code:
LibVLC libVLC;
MediaPlayer mp;
libVLC = new LibVLC();
mp = new MediaPlayer(libVLC);
mp.TimeChanged += Mp_TimeChanged;
Media media = new Media(libVLC, new Uri("http://listen.technobase.fm/tunein-aac-hd-pls"));
media.AddOption(":sout=#transcode{vcodec=none,acodec=mp3,ab=128,channels=2,samplerate=44100,scodec=none}:http{dst=:8080/stream.mp3}");
media.AddOption(":sout-keep");
media.AddOption(":no-sout-all");
mp.Play(media);
If I use a html file with the follwing code the stream is working fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<audio controls="controls" runat="server" autoplay="autoplay">
<source src="http://innoszorn.ddnss.de:8080/stream.ogg" type="audio/ogg" />
Your Browser does not support this stream!
</audio>
</body>
</html>
But if I use this file as an embedded file on my IIS server with Windows Server 2019 the stream doesn't start. The Mime type installed is on the IIS and it's exact the same code.
Is there any additional option I have to activate in the IIS to start the stream?
I have followed the walkthroughs to make an IIS Smooth Streaming publishing point support Apple devices, but have run into a problem: the target URL for the <video> tag generates a 404 response.
My isml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<meta name="title" content="" />
<meta name="module" content="liveSmoothStreaming" />
<meta name="sourceType" content="Push" />
<meta name="publishing" content="Fragments;Streams;Archives" />
<meta name="estimatedTime" content="36000" />
<meta name="lookaheadChunks" content="2" />
<meta name="manifestWindowLength" content="0" />
<meta name="startOnFirstRequest" content="True" />
<meta name="archiveSegmentLength" content="0" />
<meta name="formats" content="m3u8-aapl" />
<meta name="m3u8-aapl-segmentlength" content="10" />
<meta name="m3u8-aapl-maxbitrate" content="1600000" />
<meta name="m3u8-aapl-allowcaching" content="False" />
<meta name="m3u8-aapl-backwardcompatible" content="False" />
<meta name="m3u8-aapl-enableencryption" content="False" />
<meta name="filters" content="" />
</head>
<body>
</body>
</smil>
The html I'm using is:
<!doctype html>
<html>
<head>
<title>Apple streaming IIS test</title>
</head>
<body>
<h1>Live Stream</h1>
<video width="640"
height="360"
src="http://10.1.1.22/video.isml/manifest(format=m3u8-aapl).m3u8"
autoplay="true"
controls="true">
Live
</video>
</body>
</html>
Note that when I type the URL http://10.1.1.22/video.isml/manifest into my browser, I get the correct XML file for Silverlight-based streaming, but adding either (format=m3u8-aapl) or (format=m3u8-aapl).m3u8 (as per these instructions) causes a 404.
Edit: I've tried a few more things with no success, but they might give insight into what's failing:
The URL http://10.1.1.22/video.isml/manifest(foo=bar) gives me the exact same response as /manifest, suitable for Silverlight.
The URL http://10.1.1.22/video.isml/manifest(format=foo) gives me a 404.
The URL http://10.1.1.22/video.isml/manifest.m3u8 gives 400 bad request.
The URL http://10.1.1.22/video.isml/manifest(foo=bar).m3u8 gives me the Silverlight response.
So it seems the extension doesn't mean anything to the server but it can't parse it if parenthesized arguments aren't present. More importantly, it's clear that the server handler is actually running for /manifest(format=m3u8-aapl) but generating a 404 in some kind of sub-request. We can rule out the server not understanding the URL and failing to run the correct handler.
After exploring some related questions, I came across this answer: The stream needs to use h.264 video and AAC audio.
Unfortunately, it's not quite that simple. The free version of Expression Encoder 4 doesn't support h.264 or AAC; they are locked down and advertised as a paid feature. The thing is, Microsoft refuses to sell Expression Encoder anymore but nonetheless haven't made these features free or offered any kind of alternative! All the third-party options they suggest are astronomically priced and geared towards large corporations.
After searching painstakingly for a reasonably priced third-party replacement, I came across a program called Unreal Media Server which both supports h.264/AAC and will output to a Smooth Streaming publishing point. (Installing a DirectShow codec pack like CCCP is also necessary.)
Just when I thought I was finished, I discovered to my horror that attempting to stream made a w3wp.exe process crash. Saying 'yes' to the offer to debug showed me a stack trace with an access violation in mpeg2tssink.dll. Fortunately, the first (and only relevant) Google search result for mpeg2tssink.dll was this question where someone else had the exact same problem. The fix was to grant the IIS_IUSRS account full control of the C:\inetpub\media\archives folder where Smooth Streaming saves its video chunks. Then things started to work.
So in short:
On the computer which provides the video stream, install CCCP, Unreal Media Server, and Unreal Live Server.
On the server, grant IIS_IUSRS (or whatever user App Pools are run under on your version of Windows/IIS) permission to modify the folder where video fragments are kept, probably C:\inetpub\media\archives
I'm trying to use an SVG file in an IMG tag. In my local environment works, but when pushing to the server it doesn't. I assume I have an issue with the type of document served, but can't figure how to fix it. Here's the code that loads the SVG:
<img src="images/icon-reputation.svg" />
Here's my DOCTYPE and header info:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>SVG</title>
</head>
Any clues? Thanks.
Make sure your web server is serving the SVG files with the correct ContentType. You can check what the type is by looking in the Net/Network section of your (desktop) browser developer tools.
The way you configure the server depends on the server of course. But, for example, for apache it is:
AddType image/svg+xml svg
I have a website (just for my own references, nothing interesting for the public.)
When I load my page (Test Page) inside IE9 and view the source of the page - I can see the HTML as expected.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test Page</title>
</head>
<body>
<div id="body">
Simple test page, with an image. <br />
<img src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" alt="WC3 logo" />
</div>
</body>
</html>
But when I look at the developers toolbar (by pressing f12) the HTML appears in a <framset> tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Marrowbrook.com </title>
</head>
<frameset rows="100%,*" border="0">
<frame src="http://217.118.128.188/wotney//TestFiles/testpage.htm" frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
<!-- pageok -->
<!-- 02 -->
<!-- ->
</html>
Using Chrome, if I right click and View Source, I see the above <frameset> code, but I can also right click and select View Frame Source where I can see the HTML as expected.
Can anyone tell me why I'm seeing this ?
Thanks.
This could happen because your host name was bought with one provider, but you are hosting it on another - and you got a frame based redirect setup.
What platform is your site hosted on? It looks like the server is doing something, because the src of the frame in the frameset points to your page. It could be some kind of 'preview mode' or something of the server/cms. So it looks like the server is using a default page with a frameset on it, that pulls your actual page into it after you deploy it
It also happens when the domain you are using to get to the site is set as "Masked" Forwarding.
Check with the domain manager on your hosting and remove masked forwarding.