I have JW Player embedded on our website.
The plan is to stream video only at certain times of day, with a standby video used when the stream is not connected.
At present the below code works very well if the RTMP is connected, however it stalls o the RTMP media source if the RTMP stream is not live.
Current code (can be seen i action at http://www.powerballlive.com/powerball/streamtest.html);
<script type="text/javascript" src="http://www.powerballlive.com/powerball/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="Iz4ZkMD0vBmE3ao9rJMrEK2hb2o00wjqUBMnvA==";</script>
<title>PowerBall Live: Test</title></head>
<body>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
playlist: [{
file: "http://www.powerballlive.com/powerball/jwplayer/standby.mp4"
},
{
file: "rtmp://cp310032.live.edgefcs.net/live/4ccc983a#390564"
}],
primary: "flash",
height: 360,
width: 480,
autostart: 'true',
repeat: "always"
});
</script>
</body></html>
I'm looking for a solution where the MP4 will loop until the RTMP is connected, then resume looping when it's offline.
Any support is greatly appreciated, thanks in advance!
var IsPlaying = jwplayer('myElement').getState();
setInterval(function(){
if (IsPlaying != 'PLAYING') {
$('#myElement').hide();
$('#standbyPlayer').show();
}
else {
$('#myElement').show();
$('#standbyPlayer').hide();
}
}, 1000);
That will poll your jwplayer every 1000ms and show the standby player if the main player is not playing. Do you know how to use jQuery to manipulate DOM elements? I can post more info if necessary. Thanks.
Related
I want to implement a 360 video with Clappr as starting element to my homepage on WordPress-Basis. I am no coding expert, but I try my best.
I used this to build my code: https://ourcodeworld.com/articles/read/518/how-to-create-a-360-video-player-with-javascript-using-clappr
Video and everything is working fine, but, unfortunately, Chrome changed it's autoplay policy and the video is not starting to play in Chrome. In Firefox autoplay works fine.
Then I've found this solution: https://github.com/clappr/clappr/issues/1639#issuecomment-395414240
But, my 360 video is still not autoplaying in Chrome! I really can't figure out what to do, since the codesnippets are close to identical.
I'd be glad for any help or hint! Thanks!
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/clappr/clappr#latest/dist/clappr.min.js"></script>
<script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/can-autoplay#3.0.0/build/can-autoplay.min.js"></script>
</head>
<div id="player" class="video-background"></div>
<script>
// The URL to the 360 video player
var Video360Url = '360_VR.mp4';
// Configure your Clappr player.
var PlayerInstance;
canAutoplay.video().then(function(o) {
var cap = o.result === true;
PlayerInstance = new Clappr.Player({
source: Video360Url,
poster: 'city-view-edit.jpg',
loop: 'true',
autoPlay: cap,
height: '100%',
width: '100%',
hideMediaControl: 'true',
chromeless: 'true',
allowUserInteraction: 'false',
preload: 'auto',
plugins:
{
container: [Video360],
},
parentId: '#player',
});
PlayerInstance.getPlugin('click_to_pause').disable();
});
</script>
</html>
Just passing by.
Do you try to mute the video first? As chrome and other browsers have policy that not allow auto-playing video with sound.
Clapper mute demo with JS script
cheer
I have a azure media player embedded in my SharePoint page.
The source to the file to be played is set dynamically through a script file.Th source files can be of wmv/mp4/mpg formats and retrived from a sharepoint video portal.
However the source is not being set or it throws some error.
Please find the code below.
HTML:
<video id="vid1" class="azuremediaplayer amp-default-skin video-responsive" autoplay controls width="100%" height="100%" poster="poster.jpg">
<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>
JS:
var myPlayer = amp('vid1', { /* Options */
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
}, function() {
console.log('Good to go!');
// add an event listener
this.addEventListener('ended', function() {
console.log('Finished!');
});
}
);
myPlayer.src([{
"src": "<<URL to the source file in video portal>>",
"type": "type": "application/vnd.ms-sstr+xml"
}]);
The mime type you're using in your given code implies that you're trying to set a smoothstreaming source (application/vnd.ms-sstr+xml)
if you are setting the source as an MP4 you should use the mime type video/mp4
myPlayer.src([{ src: "YOUR_SOURCE.mp4", type: "video/mp4" }]);
you can check out this sample which plays back progressive MP4 content from the Azure Media Player samples page
Also, I'm not sure if this was a typo or not but you have "type": included in your code twice.
Please refer to https://amp.azure.net/libs/amp/latest/docs/.
Authentication token of a sharepoint videoportal file can be retreived using GetStreamingKeyAccessToken rest service.
I am trying to get the jwplayer with mpeg dash support working but am having some trouble with that.
I am encountering the following error when the page loads :
Error loading player: No playable sources found.
The jwplayer player code is as follows:
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',
dash: true,
width: 640,
height: 360
});
</script>
I will appreciate any feedback to help me fix this problem.
You need a div in there which anchors the location for the player:
<div id="myElement"></div>
with your script and the div element mentioned above it plays fine for me using JWPlayer7:
<div id="myElement"></div><script type="text/javascript">var playerInstance = jwplayer("myElement");playerInstance.setup({file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',dash: true,width: 640,height: 360});</script>
I tried playing DASH stream (http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd) in Chrome Canary browser using online JWPlayer test player which is provided and hosted by JWPlayer themselves and stream did work for me without any issue.
My app having JW player and I am sharing one video (embedded code or link) on Facebook so Facebook will play that video with JW player.
I shared one video using JM player, video posted successfully on Facebook but not working.
Please suggest me how should I do this?
We have implemented this with the following reference
http://support.jwplayer.com/customer/portal/articles/1409823-social-sharing-overlay
<script type="text/javascript">
jwplayer("container").setup({
file: "/uploads/video.mp4",
sharing: {
code: encodeURI("<iframe src='http://example.com/embed/12345.html' />"),
link: "http://example.com/page/12345/"
}
});
</script>
jwplayer("container").setup({
playlist: [{
file: "/videos/12345.mp4",
mediaid: "12345"
},{
file: "/videos/67890.mp4",
mediaid: "67890"
}],
sharing: {
code: encodeURI("<iframe src='http://example.com/embed/MEDIAID.html' />"),
link: "http://example.com/page/MEDIAID/"
}
});
It will share link on social media, but not able to play video with custom player.
Basically need to create a custom player like YouTube.
I am attempting to embed a Youtube Video inside a webpage. I am using the Youtube Javascript API to embed/load the videos.
My Problem: The video embeds inside Internet Explorer but there are many javascript errors when I inspect the console. These errors mean I cannot replay the video, make the video grow, or really do anything. These javascript errors do not occur in Firefox or Chrome just IE.
Console Error:
SCRIPT87: Invalid Argument.
www-embed-player-vf1m....js line 211 character 405
Heres my JSFiddle that demonstrates the problem. Remember to RUN it in IE to see the problem.
My code:
<html>
<head>
<script src="https://www.youtube.com/player_api" type="text/javascript"></script>
<script type="text/javascript">
function loadYouTubeVideo(uid) {
setTimeout( function() {
var id = uid;
var instPlayer = new YT.Player(id, {
height: '240',
width: '426',
enablejsapi: 1,
suggestedQuality: 'highres',
videoId: uid});
}, 500);
}
</script>
</head>
<body>
<p>Run in IE and look at console</p>
<div id="Go3u2zw6fbE"></div><script> loadYouTubeVideo("Go3u2zw6fbE"); </script>
</body>
<html>
The problem was that I was running the Javascript code from a local HTML file and not from a HTML file over the internet.
I guess when you run the Youtube Javascript API in a local HTML file (inside Internet Explorer only) the youtube video wont play. Even if I click 'Allow Javascript' it still wont play.