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
Related
I configure Advertisement through VAST tag using jwplayer like.
$(document).ready(function(){
var playerInstance = jwplayer("player1");
playerInstance.setup({
file: 'https://d150hyw1dtprld.cloudfront.net/videos/HP_VideoTest_NoPostRoll_v2_720p.mp4',
width: "100%",
displaytitle: false,
controls: false,
primary: 'flash',
mute:'false',
autostart: true,
advertising: {
client: "vast",
tag: 'http://ads.adaptv.advertising.com/a/h/DLhbzlB+8BBfoyyx+Qo7i7Bx_Mpt2nNJbie4rwz4DHkL4tzFA61JtQ==?cb=${cachebreaker}&pageUrl=${embeddingPageUrl}&description=${description}&duration=${duration}&id=${id}&keywords=${keywords}&title=${title}&url=${videourl}&eov=eov&width=${width}&height=${height}&videourl=${videourl}&duration=${duration}&br_i=ad&context=${context.homepage}&adap_uid=7924494155751153126'
}
});
});
The above SWF advertisement not played. only Primary Video (File) only plays. How can i Fix that??
It seems like there is a problem with the VAST file representing the advertisement you linked to in your code snippet—when I paste it into Google's VAST Inspector, I get this error:
(4:29:36 PM) Ad error: AdError 901: An unexpected error occurred within the VPAID creative. Refer to the inner error for more info. Caused by: Error: Error: No ad found in ad tag response
In the advertisement, there is a single <MediaFile> tag:
<MediaFiles>
<MediaFile delivery="progressive" width="400" height="300" type="application/x-shockwave-flash" apiFramework="VPAID">
<![CDATA[
http://redir.adap.tv/redir/client/VPAIDClient.swf?adTagUrl=http%3A%2F%2Fads.adaptv.advertising.com%2Fa%2Fh%2FDLhbzlB%2B8BBfoyyx%2BQo7i7Bx_Mpt2nNJbie4rwz4DHkL4tzFA61JtQ%3D%3D%3Fcb%3D%24%7Bcachebreaker%7D%26pageUrl%3D%24%7BembeddingPageUrl%7D%26description%3D%24%7Bdescription%7D%26duration%3D%24%7Bduration%7D%26id%3D%24%7Bid%7D%26keywords%3D%24%7Bkeywords%7D%26title%3D%24%7Btitle%7D%26url%3D%24%7Bvideourl%7D%26eov%3Deov%26width%3D%24%7Bwidth%7D%26height%3D%24%7Bheight%7D%26videourl%3D%24%7Bvideourl%7D%26duration%3D%24%7Bduration%7D%26br_i%3Dad%26context%3D%24%7Bcontext.homepage%7D%26adap_uid%3D7924494155751153126%26a.cluster%3D0%26a.pvt%3D0&companionId=&cpmPassback=&placementId=266469&orgId=5047&injectCompanionDummy=&pauseOnClick=&d.vw=&d.app=
]]>
</MediaFile>
</MediaFiles>
The query param adTagUrl has this as its value:
http://ads.adaptv.advertising.com/a/h/DLhbzlB+8BBfoyyx+Qo7i7Bx_Mpt2nNJbie4rwz4DHkL4tzFA61JtQ==?cb=${cachebreaker}&pageUrl=${embeddingPageUrl}&description=${description}&duration=${duration}&id=${id}&keywords=${keywords}&title=${title}&url=${videourl}&eov=eov&width=${width}&height=${height}&videourl=${videourl}&duration=${duration}&br_i=ad&context=${context.homepage}&adap_uid=7924494155751153126&a.cluster=0&a.pvt=0&companionId=&cpmPassback=&placementId=266469&orgId=5047&injectCompanionDummy=&pauseOnClick=&d.vw=&d.app=
which seems like it's circling back to the same VAST file as the one you linked to. So it really just seems like you have a bad VAST tag here.
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.
We present video content to end users and I've recently had a user report that they are unable to view the videos (loaded using JW Player 7 self-hosted) in any of the HTML5 supported browsers (IE11 11.9.0060, Chrome 46, Firefox 42).
We have tested in these browsers repeatedly before going live and we were never able to re-create the issues reported by this end user
Here is the code that is used to instantiate the video player:
<script type="application/javascript" src="http://sharepoint-videos.s3.amazonaws.com/scripts/jwplayer.js"></script>
<script type="application/javascript" src="http://sharepoint-videos.s3.amazonaws.com/scripts/jwplayer_license.js"></script>
<link rel="stylesheet" href="http://sharepoint-videos.s3.amazonaws.com/scripts/player.css" type="text/css" media="screen" />
<div id="visualSPPlayer">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("visualSPPlayer");
playerInstance.setup({
playlist: [{
image: "http://sharepoint-videos.s3.amazonaws.com/screencasts/20002/poster.PNG",
sources: [ {
file: "http://sharepoint-videos.s3.amazonaws.com/screencasts/20002.mp4"
}],
tracks: [{
file: "http://sharepoint-videos.s3.amazonaws.com/screencasts/20002/thumbnails.vtt",
kind: "thumbnails"
}]
}],
primary: "html5",
width: "100%",
aspectratio: "16:9",
autostart: true,
skin: {
name: "vapor",
active: "#E16933",
inactive: "#E16933",
background: "#333333"
}
});
</script>
This user reports that all they see output in their browser is the: Loading the player....
Here is the error the user is reporting in the browser console:
The value of the property 'jwplayer' is null or undefined, Not a function object
My question is what could be contributing to this one user's issue with the videos loading when they load fine for my team and all other users. What should I have him look into changing?
I've had him test if Javascript is enabled successfully: https://www.whatismybrowser.com/detect/is-javascript-enabled
Can you have them try another computer in the same office? What about in an incognito window? What about on their phone in the office's wifi? Yeah i suspect the content is possibly being blocked. As #Antiga said, have them look at the network tab to see what other calls are being made, and check to see the http code, they should all be 200.
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.
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.