Embed Streams onto website - embed

Good-day, I have these streams http://xxx.xxx.xxx.xxx:9987/udp/239.100.0.105:1234 which i can play through VLC and Sm Player. Can i embed these streams onto a website using these URL's through something like JWPlayer or Flow player?

You can use JWPlayer.
Add JW Player library to your page:
​<script src="//p.jwpcdn.com/6/9/jwplayer.js" ></script>
And the script
<div id=myElement></div>
<script>
jwplayer("myElement").setup({
file: "http://xxx.xxx.xxx.xxx:9987/udp/239.100.0.105:1234",
image: "myVideo.jpg", //only if you have image
height: 360,
width: 640
});
</script>
HLS in Flash is only supported in the JW6 Premium and Ads editions, so if your stream is HLS you'll to buy licence (rtmp works in free edition)
If you're looking for free player which support HLS you can use Video-JS with this plugin: https://github.com/videojs/videojs-contrib-hls
exapmle: http://ecmendenhall.github.io/hls-aac.html
Edit 1:
<div id=myElement></div>
<script>
jwplayer("myElement").setup({
file: "http://xxx.xxx.xxx.xxx:9987/udp/239.100.0.105:1234",
image: "myVideo.jpg", //only if you have image
height: 360,
width: 640,
primary:;flash',
type:'hls'
});
</script>

Related

HTML5 video element extremely slow in Tizen (Samsung Smart-Tv development)

I've recently started programming within the Tizen environment and SDK, and I am trying to create a (Samsung)smart-tv application which takes mp4-media links and display those links in form of a video-player, the problem is that whenever I use the html5 video tag, the application takes ages (2-4 minutes) to load, and a lot of the time it doesn't even load at all.
The code has been tested on JsFiddle and locally, and it works perfectly fine there, but whenever I try to execute the same code within the index.html in the Tizen project (which runs in a Samsung TV emulator) it exhibits the behavior I just explained (extremely slow/crashing).
Here are some examples of what I tried:
<html>
<head>
<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto'
width='640' height='264'
poster="download.jpg" data-setup='{}'>
<source src='sample.mp4' type='video/mp4'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.5.4/video.js'></script>
</body>
</html>
I have also tried without the use of video-js, I tried only using the video element, but the same result, it would sometimes work, sometimes not, and when it would work, it would take a long time before it actually loaded. According to the documentations, HTML5 is supported, and the use of the video tag is even "encouraged" by the guides they published. I have also tried generating the HTML with javascript and trying to make it work like that, but no luck.
It could be the video tag implementation of the emulator, codec, etc. I assume that you can't test the code on an actual Tizen TV device so I would suggest adding the event listeners first, and see what's happening, then try the AVPlay API, which I would recommend implementing in your apps.
<body>
<video id='video' width='700' height='400'
poster='yourPosterURI' src='yourVideoURI'
controls style='background:black'>
</video>
</body>
var videoElement = document.getElementById('video');
videoElement.addEventListener('loadeddata', function() {
console.log('Video loaded.');
});
videoElement.addEventListener('timeupdate', function() {
console.log('Current time: ' + videoElement.currentTime);
});
videoElement.addEventListener('seeked', function() {
console.log('Seek operation completed.');
videoElement.play();
});
videoElement.addEventListener('stalled', function() {
console.log('Video stalled.');
});
videoElement.addEventListener('ended', function() {
console.log('Video ended.');
});

Cordova, HTML5 Video not responding to touch inputs

Update:
I did a fully build via Android studios, and the HTML5 Video does not work at all. It may be related to it targeting a web site? Though I can have the app open a website from the app directly, so maybe something else I am missing. I also tried with the video in the app directory, but again, it did not seem to load at all.
I am building a Cordova/Framework7 app that I need to embed videos into.
The video loads, and I can scroll back and forth through the video, but the giant PLAY button does not respond when touching it in app.
<video id='video' controls>
<source src="https://website.com/FancyVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video
</video>
I've tried to make an event listener to trigger the video (with and without the onload bi)
window.onload = function() {
var video = document.getElementById('video');
video.addEventListener('click', function () {
video.play();
}, false);
}
So I am not sure what to do, it should work.
I have followed several other question threads but none seem to work, or are mostly obsolete. I have also tried media plugins with similar results.
HTML5 element on Android
html5 videos not showing controls on android once loaded
Note:
I am using
PhoneGap desktop application, and a Galaxy S7 running Android 8.0.0
Cordova Android Version 7.1.0
Cordova Version 8.0.0
Framework 7 Version 3.0.1
PhoneGap Version 8.0.0

How do I play video on JWPlayer whenever my live stream is offline?

I'm trying to get JWPlayer to run a playlist of video whenever my live stream is off air.. Does anyone know if this is possible? Right now as it sits, when the RTMP live feed is off there's just a still image. I want to entertain the viewers when its off, and then stop the playback of stored videos when the stream starts back up, I've seen this feature available with ustream and want to duplicate it some how.
I'm currently trying to use this code but when we go live, or are live it just plays our youtube video instead.
<script src="http://wpc.E74E.edgecastcdn.net/20394R/jwplayer.js"></script>
<div class="contentcontainer">
<div id='playerjxUzssOPWgxB'></div>
<script type='text/javascript'>
jwplayer('playerjxUzssOPWgxB').setup({
file: 'rtmp://fml.E74E.edgecastcdn.net/20394R/Streamname',
image: 'http://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-$
width: '635',
height: '360',
autostart: 'true',
primary: 'html5',
playlist: 'http://gdata.youtube.com/feeds/api/playlists/PLkfH4h937hyiJT-A-NxicPiyASEjXXPSV?v=2&alt=rss',
rtmp: { subscribe: true }});
</script>
<div id="chatnow"></div>
</div>
Debug URL is http://bargainsbeyond.com
Thanks for your time guys
One idea is to try something using our API - http://support.jwplayer.com/customer/portal/articles/1442607-example-a-custom-error-message
Basically, the stream is offline, so playing the stream will load() another file in the jw player and then play() it, and when that player reaches onComplete(), the page reloads.

Sending camera video from browser to server

Im trying out the new and exciting features of chrome canary 19.
I can basically grab the video from the web-cam and set it to a source element for a video tag.
<!DOCTYPE html>
<html>
<head>
<title>Camera capture</title>
<script>
var localStream;
var localStreamObjUrl;
window.onload = function() {
navigator.webkitGetUserMedia("audio, video", gotStream);
}
function gotStream(stream) {
localStream = stream;
localStreamObjUrl = webkitURL.createObjectURL(localStream);
var video = document.getElementById("selfView");
video.src = localStreamObjUrl;
}
</script>
</head>
<body>
<video id="selfView" autoplay audio=muted></video>
</body>
</html>
From the example at https://apprtc.appspot.com, we can grab the video and stream it to a peer...
My question is, can I avoid doing all the traversal to get a p2p connection and directly upload the video to a server? Id like to be able to relay the video stream instead of sending it p2p.
You need some kind of streaming media server on the back.
The process would be:
capture the feed
send it to the server
transcode to various client formats
manage the outbound streams
There are numerous free and paid varieties available:
nodejs(demo/POC)
wowza(paid)
chrome based
More about transcoding: xuggler
The 'swiss army knife' of media: ffmpeg
and so on.
I have developed video recording solutions for the better part of the last 5 years and contributed a lot to fixing video recording bugs in Red5.
On the desktop you can use a Flash client + a media server (Red5, Wowza, Adobe Media Server) and on the mobile you can use HTML Media Capture.
I gave a detailed answer on a similar question at Record video on browser and upload to LAMP server
You can try nimbb, in which they have Flash-based and HTML5 capturing. After that, you can push the video to Brightcove to transcode it to various clients format.
They have API integration. The only issue is the cost.

HTML tag to select Flash-player plugin to play flv

If I have .flv files on my server at some location like http://www.example.com/archive/test.flv. In HTML page how can I tell the browser to use Flash player to play this video like youtube videos are played.
Can someone tell me how to do this?
PS: I am noober than noob in web dev, so please give some code snippet or answers that beginners like me can understand. Thank you
You will have to create or find an existing video player SWF; there is no built-in Flash video player. I've found JW Player to work pretty well.
Update:
Here's a sample of how you can embed the JW Player:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { file:'yourvideofile.flv',autostart:'true' };
var params = { allowfullscreen:'true', allowscriptaccess:'always' };
var attributes = { id:'player1', name:'player1' };
swfobject.embedSWF('player.swf','player','480','270','9.0.115','false',
flashvars, params, attributes);
</script>
</head>
<body>
<div id="player"></div>
</body>
</html>
You can use this one to make a player for your flv file:
http://oos.moxiecode.com/flvplayer/
If you happen to have Dreamweaver, you can embed an flv video in a few seconds (it handles the embedding the associated code and resources.)
If not, you can find nice flash video players for download (free or paid) by googling. For instance, here's an option that offers free and paid alternatives:
Flow player
And, additionally, you could upload the video to youtube and just embed the code on your site for playing, too.