I'm being asked to add a video player to my company's web app that plays streaming video from Azure Media Services.
Using both the Azure portal and the Azure API I have been able to load and publish the video files we want to present.
I found samples here and here showing how simple it is to set up the Azure Media Player in your HTML page.
I added the relevant bits to our web app and the player shows up, but nothing plays. In Chrome, the player is blank. In IE11, the player shows "Invalid Source". In Edge, the player shows "This type of video file isn't supported.".
I plugged the URL's of our videos in the Azure Media Player Demo and they worked fine.
I created stripped down HTML files with just the basics for the video player using Azure's samples and their own promo video.
<!DOCTYPE html>
<html>
<head>
<title>Azure Media Player Test</title>
<link href="//amp.azure.net/libs/amp/1.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src= "//amp.azure.net/libs/amp/1.3.0/azuremediaplayer.min.js"></script>
</head>
<body>
This sample came from https://azure.microsoft.com/en-us/blog/announcing-azure-media-player/
<br />
<br />
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.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>
</body>
</html>
and
<!DOCTYPE html>
<html>
<head>
<title>Azure Media Player Test</title>
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
</head>
<body>
This sample came from http://amp.azure.net/libs/amp/latest/docs/
<br />
<br />
<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.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>
</body>
</html>
I get the same results with these as I did in our web app, i.e. blank or "Invalid Source" or "This type of video file isn't supported."
I assume I'm missing something basic, but what?
Are you using a web server to host the code you wrote or just running it locally? If you're running it locally, playback won't work in chrome or edge without some form of a webserver. See this answer for more details:
Azure media player(AMP) not working on chrome if script file is saved locally
Related
I'm hosting on wix and want to embed a simple audio player to play a livestream. I have tested the code in w3schools and the audio plays. However, when viewing the wix site with the same code embedded, the player loads with a runtime of 0:00 and won't play, even when clicked.
I can only assume there is a conflict with the iframe wix runs the code in.
The live page is at https://www.joetimothycoleman.com/bewilderments-22
Any solutions welcome!
<html>
<Head>
</head>
<body>
<audio controls autoplay>
<source src="http://locus.creacast.com:9001/slawica_puszcza_zielonka.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
I am trying to use VideoJs to publish Video On Demand on my website.
The Streaming server is Wowza.
This is the code of my webpage:
<html>
<head>
<link href="http://vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="480" height="270"
poster="http://websiteURL/image.png"
data-setup="{}">
<source src="rtmp://serverURL/mediacache&mp4:http/fileUrl.mp4" type="rtmp/mp4" />
<source src="http://serverURL/mediacache/_definst_/mp4:http/fileUrl.mp4/playlist.m3u8" type="application/x-mpegURL" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<script src="http://vjs.zencdn.net/5.4.6/video.js"></script>
</body>
</html>
It works correctly on
Google Chrome (PC, MAC, Android )
Firefox (PC, MAC)
Firefox (PC, MAC)
IE11 (PC)
Safari (MAC, iOS)
But on Windows Phone 8.1 does not work and the video player shows this error: "the media could not be loaded, either because the server or network failed or because the format is not supported."
I tryed, without success, to add this source for using Microsoft Smooth Streaming:
<source src="http://serverURL/mediacache/_definst_/mp4:http/fileUrl.mp4/Manifest" type="video/smooth">
I also tried to change type to "video/x-m4v" but nothing changed.
Any idea? thanks for help!
IE on Windows phone supports none of those formats.
It's possible that videojs-contrib-hls, which adds HLS support to browsers via MSE can play the HLS stream on Windows Phone.
My markup is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
</head>
<body>
<div id="slider1">
<div class="flexslider">
<ul class="slides">
<li class="list" data-video="vid/scene1.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li class="list" data-video="vid/scene2.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li class="list" data-video="vid/scene3.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li class="list" data-video="vid/scene4.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li class="list" data-video="vid/scene5.mov">
<video width="100%" height="100%" preload poster="images/white.jpg">
<source src="vid/scene5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
start:animation,
after:animation
});
});
function animation(slider){
var myVideo=$('.flex-active-slide video').get(0);
myVideo.playbackRate=1.0;
myVideo.play();
}
</script>
</body>
</html>
I have converted my initial movie files to .mp4 using some free converters online.
I can play in quicktime player but unable to play on safari browser.
I have tried using various formats .ogg,.webm but failed.
Please suggest the appropriate way and also the videos are playing fine in all other browsers.(Chrome,Firefox)
A couple of things you could try:
I can see that your trying to auto play the video on page load. So if you are trying to view the video on iOS it will not play because Apple only allows playback on user interaction (like a touch event). You can read there for more information.
If it does not work on Safari desktop then it could be an issue with the MIME/TYPE on the server where your MP4 are hosted. You can begin to read here or Google around for more information. I would try to play a simple HTML5 video tag in Chrome with the mp4 to rule this one out. If it plays in Chrome then it is not a MIME/TYPE server issue.
Having an HTML5 doctype could also help: <!doctype html>
Safari will not play .webm or .ogg video files. You should stick to mp4 for Safari. If it is an encoding issue trying a software like handbrake could solve your issue.
Also you would need a recent version of Safari and Quicktime to be installed on your PC to play HTML5 video so an update or fresh install may solve your issue.
I hope this put you in the right direction.
Thanks
In delivering content to the Safari browser, we have found that the browser, upon noticing multimedia content to be downloaded, will first send an extra request, which includes a Content-Range header, to the web server to ascertain the size of the content to be delivered. If the server does not respond correctly, the browser will not download and play the content. This extra request/response is defined in, but not required by, the HTML spec.
In our experience, this has been true for Safari on a Mac and just about any browser that we tested on an iPad. However, Safari for Windows appears to play fine even without this extra exchange between the browser and the server.
If this is the problem you are seeing, the player control will be displayed in the browser window, but the the content will never start playing. No error or other message, just a blank player control.
In this case, you will need to look to your server for the answer. If the server is yours, as our is, you will need to add this additional piece to respond to the browser request for media size, i.e. to respond to the Content-Range header in a browser request. If the server is from someone else, ask them if they support this. Again, in our experience, not all servers do.
I'm on a server still running ColdFusion version 8. I'm not sure if this is my problem though.
I have the following code that I can get to work in my computer on my desktop, using both Firefox and Chrome. I access it as an html file directly using a file system url, i.e. file:///C:/.../test.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>
<body>
<p> Try w3Schools test video</p>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
When I put this test.cfm or test.html page up on the Coldfusion 8 server, neither browser displays the video. The movie.mp4 and movie.ogv files are up on the server in the same directory as the test.cfm file. In Firefox I get:
"No video with supported format and MIME type found."
In Chrome it shows the video controls but no video is present.
Is there something I need to enable on the server (it is a shared hosting account)? Perhaps this is not particular to ColdFusion and I'm making another mistake (note this is my first attempt to use the video tags).
Thanks
P.S. If I access it on my computer using Aptana's launch mechanism and running in:
127.0.0.1:8000/.../test.html
I get the same problem as running on the server. The videos do not display.
Courtesy of Miguel-F's guidance, the server was missing support for the .mp4 and .ogv mime types. When the hosting company added those to the server, the videos displayed.
I am trying to make an audio player using HTML 5 project template. I am using the following HTML code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
<title>Windows Phone</title>
</head>
<body>
<div>
<p>Audio Player</p>
</div>
<div id="page-title">
<p>Play Audio</p>
<audio controls="">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
I picked up this code from here, I have added the "horse.ogg" to the solution explorer as shown in the screenshot below...
But when I run this appication I get the following output, it reads
Invalid Source
But when I open the same html using a browser I am able to play the file properly.
What could be the problem ?
Is there a better and easier way in which I could play audio files which I will add to the solution explorer and play using HTML 5 ? I am planning to add 10-15 small and funny audio clips and the app will allow user to select it and play it using HTML 5.
Please share your thoughts on this.
As the error message says, it's an invalid source.
Internet Explorer 10 doesn't support Ogg audio files, but MP3 files. Convert your Ogg to an MP3 and it should work fine.
<audio controls>
<source src="horse.mp3" type="audio/mp3">
</audio>
Also, if you're only providing one source you can use the src attribute of the audio element:
<audio src="horse.mp3" controls></audio>
But this is only really recommended if you are targetting one particular type of browser only.