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.
Related
I am fairly new to js and html. I am building my own Video Portfolio Website.
I have multiple videos and update their src, depending on which video is clicked.
I use the video.js player to play my m3u8 and mpd files.
The problem is that, for some reason video.js can't update the src of the video and fails to play any video at all.
[You can download my website here]
I've been trying to solve this problem for a couple weeks now, but couldn't manage to do so.
I hope someone here can help!
Thanks in advance!!
When you're using Video.js (or any comparable player) you shouldn't try to directly interact with the underlying <video> or <source> elements, you need to use Video.js's API.
Loading a new video is accomplished by passing a source or array of sources to the player's src() method.
videojs.getPlayer('my_player').src({
type: 'application/x-mpegurl',
src: 'https://example.com/video.m3u8'
});
See e.g. https://videojs.com/guides/player-workflows/
I'm using JW Player to live stream content onto a web page. The player is backed by an open-source library called cine.io.
My issue is that the player falls back to an HTML 5 video element for all mobile web, both on iPhone and Android. There are some differences between the flash solution of JW Player and HTML5 - notably that if a live stream starts, then stops, then restarts, the video element will not pick up the restarted stream.
This is a problem since streams often drop in and out - and the flash solution does pick up the restarted stream.
I tested a bunch of listener methods on the video and the only one that signalled that the stream had ended was a "time update" listener:
$video.on('timeupdate', function(){
//Do something
});
However none of my attempts to re-open the stream have been effective.
Is this even possible? Can anyone provide pointers?
Would an example like this work?
http://support.jwplayer.com/customer/portal/articles/1442607-example-a-custom-error-message
i built some half tv script using php. the concept is admin upload video and set the playtime,
when user access the site video plays automatically with specific time.
url
http://ezwebdesigns.co.uk/onlinetv/index.php
i use videojs player but cant start with specific time, it always start with begining, i set the methods but not working.
anyone know video player with mp4 support that can play video from specific time
Try sth like that:
document.getElementById('videoid').addEventListener('loadedmetadata', function() {
this.currentTime = 50;
}, false);
Okay so I have followed a good tutorial regarding embedding videos via HTML5 video tag, which can be found here. Basically the idea is that on hover the video plays, on hover out it stops playing.
Well, I've been trying to include multiple videos on one page (all the same video, mind you) in hopes that I could create a sort of interactive multi-tiled board of sorts. In other words, you hover over each video, it creates varying images based on where in each video you end up, etc.
Whatever, the question I am asking is: based on this tutorial that I've followed, what is the best way to create multiple, tiled videos? I'll paste the code I've been working with. The problem I'm having is that if I create multiple javascript functions, it shows only the video of the last function I've created, rather than all videos.
I hope this makes sense. Here is the link to what I've been working on so far. NOTE: the video takes a while to load, so until then it will play the sound but no image.
Thanks in advance for any help!
Here is the solution I found:
The only warning I give you is to set the videos to preload="none" because if they all load it will be nightmare on your bandwidth. I had to switch mine and now I am looking for a solution to let people know a video is loading.
var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e)
{
this.play();
}
function hideVideo(e)
{
this.pause();
}
Here is where I got the answer: http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/
For anyone that's looking to achieve this using jQuery, here's a solution that I use for dynamically loaded content:
//play video on hover
$(document).on('mouseover', 'video', function() {
$(this).get(0).play();
});
//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
$(this).get(0).pause();
});
This can be used for a page with 1 - N videos, and only the hovered video will play at each time, while each will pause on the current frame on mouseleave.
Here's an example of it in action: http://jsfiddle.net/cc7w0pda/
Try this, it's easy to understand
<!DOCTYPE html>
<html>
<video id="vv" width="500" height="500" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="xx.mp4">
Your browser does not support this file
</video>
</html>
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.