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.
Related
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
I actually have a probleme playing some MP4 video on my phone.
I'm on android 5.0.1, using Chrome 47 with this simple html code :
<!doctype html>
<html>
<head>
<title>ssqsq</title>
</head>
<body>
<video controls="" autoplay="" name="media">
<source src=x type="video/mp4">
</video>
</body>
</html>
Let say 'x' is a variable where is my source address.
When the address is : http://www.w3schools.com/html/mov_bbb.mp4 , Chrome read the video without probleme.
But when x is : http://someurl/files/atoms/video/mov_bbb.mp4
(it's the same video, literaly. I download from w3s to upload on this website), my chrome isn't abble to read the video
'someurl' has an .htaccess, but this not seem to be the probleme since the video play normally on chrome(on my desktop) and even on my androind (using FireFox 43.0)
I have thinking of codec probleme when i was working with other video, but this one (mov_bbb.mp4) does not change between w3s and 'someurl'
I don't know where it could come from.
Not the codec, because video play well on w3s.
Not the server configuration because the video play well on firefox and on desktop...
Advice and help would be thankfull!
I have an HTML page that contains a MP4 video:
<html>
<body>
<video width="800" height="600" controls>
<source src="/static/xyz.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
When I load the page in Firefox, it doesn't show the play control buttons but shows error message "No video with supported format and MIME type found" (see the screenshot below).
So I use this site to test my browser's ability to play HTML5 mp4 video and it can successfully play the test video on that site. My Firefox version is v36 on CentOS Linux. I also tried using Chrome and it can't play it either. I also tried it on Firefox/Chrome on Windows but failed. I then use the Firefox debugger to look at the debug info and I see the following message:
Media resource http://localhost:5000/static/xyz.mp4 could not be decoded.
All candidate resources failed to load. Media load paused.
I then tried playing the xyz.mp4 video on my local machine using Linux's movie player and it plays fine and it also plays fine in Window's media player. But when I use the above HTML5 <video> tag, it doesn't play for all browsers in both Linux and Windows. I also followed Mozilla's online forum to change the browser settings and clear caches but none of them works. So what caused the problem of this simple HTML5 ?
This is very likely the problem with your video file. mp4 is not really a format, but a container that can hold video in different formats. Firefox supports only H.264 encoded video.
Simply speaking, there are several types of mp4 files and not all of them are supported by browser. To verify this, you can download one of the videos from the quicksmode website and replace your video with it.
Possible solution:
//autoplay muted onloadedmetadata="this.muted = true"
<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
<source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
Your browser does not support the video tag.
</video>
On my website i have a code for video tag that looks like this:
<div class='videoRoundedBorder videoSelected' id='rozw1border' >
<div id='filmPierwszy' >
<video id='film1video' autoplay class='aFilm filmSelected' width="251" height="156" loop onmouseover='hoverFilm(1);' onfocus='hoverFilm(1);' onmouseout='hoveroutFilm(1);' onblur='hoveroutFilm(1);' onclick='window.location.href = "?kategoria=firma&oferta=stworzenie-strony-internetowej"' poster="http://websoul.pl/newdesign/videos/tworzenie-stron-www.png" >
<source src="http://websoul.pl/newdesign/videos/tworzenie-stron-www.mp4?v=8" type="video/mp4" />
<source src="http://websoul.pl/newdesign/videos/tworzenie-stron-www.ogg?v=7" type="video/ogg" />
<source src="http://websoul.pl/newdesign/videos/tworzenie-stron-www.webm?v=7" type='video/webm' />
Stworzenie<br/>strony WWW / modernizacja </video>
</div>
It works fine in FF, Chrome, IE 10 and on latest Androids. But on my PC with Windows 7 in Safari 5.1.7 (latest for Windows) it does not display.
Not only video is displayed. There is no error in Safari console and no indication of trying to download the video whatsoever.
I was reading several tutorials about doing the right tag and encode video properly but i don't know if this is an issue of the Win Safari not working properly or the issue also occurs on iPhones and iPads since i don't have ones.
What to do to make this video display properly on iDevices ?
Safari requires QuickTime to be installed in order to play HTML5 video (yes really) so perhaps ensure you have it installed? (normally a Mac system would have, but perhaps a Windows system does not)
"Safari supports the video and audio media elements on iOS 3.0 and later and in Safari 3.1 and later on the desktop (Mac OS X and Windows)" - apple.developer
Try deleting the tags like onblur and onfocus in your video tag. Try the standard video tag to test it.
edit:
Maybe try to add the quicktime plugin: Here
add:
<script src="ac_quicktime.js" type="text/javascript"></script>
and maybe use a .mov movie like this:
<source src="myMovie.mov" type="video/quicktime">
I am trying to play video on chrome using video tag (html5) this video is uploaded on wowza media server and its run on only mac in safari, it does'nt play on windows and even on chrome on mac, what can i do for playing video on chrome on windows , my code is
<video controls="controls" width="480" height="320">
<source src="http://184.72.239.149/vod/mp4:GettingStarted.mov/playlist.m3u8" />
</video>
i dont want to use flash to play video.
You'll have to use a different format for other browsers that don't support HLS. I have not seen this work with Wowza and browsers' video tag, but there is an example using JwPlayer - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/single_mp4.html. Note that this does fall back to flash for Firefox and Opera.