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.
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 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.
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.
How can I make custom UI controls for the QuickTime Player in HTML pages? (like Apple does on its site)
You need to use the QuickTime JavaScript API.
Make sure to check the section "Controlling QuickTime Using JavaScript", for some code examples.
You would be able to do the following:
<div>
<script language="javascript" type="text/javascript">
QT_WriteOBJECT('MyMovie.mov', '180','160', '',
'obj#id', 'movie1', 'emb#name', 'movie1', 'enablejavascript', 'true');
</script>
</div>
<p>Play and Stop Movie: <br>
Play Movie<br>
Stop Movie<br>
</p>