The example below plays almost instantly if I click on play as soon as possible when page is loaded, in Firefox. But in Chrome the playback will take about 4 seconds before playing sound. Why is it so and what can I do to speed this up in Chrome?
The audio source is an mp3 stream streaming from an Icecast server.
<html>
<head>
</head>
<body>
<audio id="audio" crossOrigin="anonymous" src="http://..." controls />
</body>
</html>
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'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 have setup a page with a videojs html5 player that automatically starts to play a remote RTMP live stream. It works.
When I start the stream the video appears as a tiny box in the top left of the player. The player is 1280x720 and the video is streaming from a computer or android phone at any resolution, but it also starts in the top left corner.
I haven't measured the resolution of the video in the corner but I'd guess it's about 40x40. When I select the fullscreen option the video stretches to full screen. When I shut off fullscreen the video correctly fills in the player.
I would expect the video to start and fill the player right away without having to fullscreen/restore it. Any advice or direction would be greatly appreciated it.
This is what I'm working with
<html>
<head>
<title> Stream Player </title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body bgcolor=000000>
<center>
<font face="verdana" color=993333><h1>Test</h1></font>
<video id="livestream" class="video-js vjs-default-skin vjs-big-play-centered"
controls autoplay preload="auto" width="1280" height="720"
data-setup='{"example_option":true}'>
<source src="rtmp://webserver.example:1935/live/streamname" type="rtmp/mp4">
</video>
</center>
</body>
</html>
I am creating a website which play live videos of any event.The Only
way i know is the VLC, is there any way to implement faster and smooth
streaming???
To generate FLV streaming from VLC reffer this
link
Now to play FLV streaming using Flow flash player reffer this link
Now below is the code for playing video in browser
<html><head>
<script type="text/javascript" src="flowplayer-3.2.12.min.js"></script>
</head><body>
<a
href="http://10.100.200.123:11443"
style="display:block;width:520px;height:330px"
id="player">
</a>
<script>
flowplayer("player", "flowplayer-3.2.16.swf");
</script>
</body></html>
I'm using the HTML5 audio tag to create a music player on my remote server. The audio tag works as expected when one computer is playing.
However, I'm getting a problem where if two computers are trying to play the same audio file, one of them will not stream until the other has paused its playing, finished streaming, or stopped streaming.
Is there some programming/server configuration that lets me stream the same file to multiple devices at the same time?
Here's the code, as requested
<html>
<body>
<audio id="jukebox" controls>
<source id="musiclocation" src="/music/test.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>