How to implement live video streaming in a website using VLC - 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>

Related

Embedding ogg audio livestream to wix page

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>

Why is audio stream playback faster in Firefox than in Chrome?

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>

Youtube video load in a-frame

<!doctype html>
<html>
<head>
<title>multiple pseudo scenes</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js">
</script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video-src" autoplay="false" src="https://www.youtube.com/watch?
v=Uz12cLvkVYY"></video>
</a-assets>
<a-video id="video-screen" src="#video-src" position="1.591 2.206 -11"
width="30" height="13">
</a-video>
</a-scene>
</body>
</html>
This is my code. I want to load youtube video in a scene using a-frame. But it does not show anything. How to load a youtube video using a-frame?
It'd be very convenient if you could just drop a youtube URL into a <video> tag, but that's unfortunately not how it works. To embed a youtube video in your page you need to follow one of the methods in the youtube API, which ends up one way or another inserting an iframe in your page containing the video.
And iframes can't be used inside a-frame:
There is no way for the browser to display <iframe>s within WebGL. While it is possible to overlay an <iframe> on top of the canvas, the <iframe> will not display in VR nor can it integrate with the scene.
Further on in the a-frame docs, youtube is specifically mentioned:
Can I render YouTube videos as a texture? No. You could proxy YouTube videos as a texture or download them locally to serve, but that is against their terms of service.
...which suggests that video is possible, but youtube is not (for legal, rather than technical, reasons). If you need to do this you'll need a non-youtube video source.

I have multiple HTML5 flowplayers on a page. How to I make them play mutually exclusively?

I have Multiple HTML5 flow player instances on my page. When I start to play one, then click on another one, the first one doesn't stop. Is there any way to configure it so that only one will play at a time?
Here is the code for a test page:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<!-- 2. flowplayer -->
<script type="text/javascript"
src="//releases.flowplayer.org/5.4.1/flowplayer.min.js">
</script>
<!-- 3. skin -->
<link rel="stylesheet" type="text/css"
href="//releases.flowplayer.org/5.4.1/skin/minimalist.css">
<title>title</title>
</head>
<body>
<div>
<div class="flowplayer">
<video>
<source type="video/mp4" src="PATH TO VIDEO 1">
</video>
</div>
</div>
<div>
<div class="flowplayer">
<video>
<source type="video/mp4" src="PATH TO VIDEO 2">
</video>
</div>
</div>
</body>
</html>
Ok. Finally found it! It's a feature called "Splash"
From the documentation:
Flowplayer has a unique feature called "splash screen" which is similar to the poster setup except that the nested VIDEO or Flash OBJECT tag initially is not present on the page, but is inserted on demand. The player is installed on the fly when the user clicks on the splash screen. This has the following benefits:
You can have an unlimited amount of players on the page and they - or rather their splash screens - all render immediately, even in Flash mode.
There are no hidden Flash objects which interfere with your scripting or CSS layout dynamics.
Only one video can be played at a time. When the user clicks on a splash screen while another player instance is running, the latter is unloaded automatically.
By design the splash setup also disables preloading of the video.
https://flowplayer.org/docs/setup.html#splash
As far as I'm aware there is no default behavior in flowplayer to only allow one video to play when there are multiple instances on a page (whether using the flash player or the newer HTML5).
You can do this yourself using the flowplayer api. The api offers methods such as play(), pause() and stop(). In your case you could bind to the click event to be able to stop all other instances.
Example
$('#bacon-player').bind("click", function(e, api)){
// Add code here to stop other players.
$('#other-player').stop();
};

Play dailymotion videos in jwplayer

hi im looking if you guyz can help me with this i want to play dailymotion videos with jwplayer i can play youtube videos but i also need it to play dailymotion videos please help me with this 1
here is the code it plays youtube videos but when i put in a dailymotion url it gives me this error
"Task Queue failed at step 5: Playlist could not be loaded due to crossdomain policy restrictions."
here is the code for youtube videos that can play in jwplayer
<script src="swfobject.js" type="text/javascript"></script>
<script src="jwplayer.js" type="text/javascript"></script>
<script type="text/javascript">
jwplayer("jwplayer").setup({
'flashplayer': "player.swf",
'width': '641',
'height': '391',
'allowfullscreen':'true',
'allowscriptaccess':'always',
'wmode':'opaque',
'controlbar':'over',
'dock':'true',
'dock.position':'left',
'mute':'false',
'stretching':'uniform',
'autostart': 'true',
'file': 'http://www.youtube.com/embed/qBW59yz-_ZM',
'logo.file':'logo.png',
'logo.hide':'false',
'logo.position':'top-right',
'logo.link':'link',
'abouttext':'text',
'aboutlink':'somesite',
'skin':'bekle.zip'
});
</script>
This is disappointing, but according to this thread:
http://www.longtailvideo.com/support/forums/jw-player/using-playlists/30409/play-dailymotion-videos-in-jwplayer/
Currently, JWplayer doesn't support 3rd party sources other than YouTube.
Update:
If you don't have to use JWplayer, you can try MediaElemnt Player http://mediaelementjs.com/ It can play both YouTube and DailyMotion videos and you only need to provide the URLs of the landing page. The dailymotion "plugin" is at https://github.com/johndyer/mediaelement/pull/663