I'm trying to embed a YouTube playlist on a site and have it autoplay with the sound muted. I found this code to do that:
<script src="http://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<script type="text/javascript">
google.load("swfobject", "2.1");
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.mute();
}
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/mOLp4doE51Q&list=PL86C090F73345FED6&feature=plpp_play_all?enablejsapi=1&playerapiid=ytplayer&allowFullScreen=true&version=3&loop=1&autohide=1",
"ytapiplayer", "100%", "380", "8", null, null, params, atts)
</script>
It is a WordPress site and when I entered that code it just automatically deleted all of the widgets on the sidebar and header that were iFrames/ads. I put the code in the widget that normally has the video code in it and didn't touch the other widgets but when I reloaded it there were all gone and I had to rebuild them all (luckily from a backup).
On top of it, the videos didn't even load.
I'm assuming this code is somehow targeting iFrames and then running some code on them? Can somebody help me decipher this problem before I give it another go? I'm not great with Javascript and am trying to find some answers. Thanks!
I figured it out, the above codes works just fine. The copy and paste from the website I was looking at had parentheses from a foreign keyboard that weren't recognized when I pasted them.
I'm still at a loss of why it would break all the iframes and automatically delete them but the solution is from changing out the parentheses.
Related
I wanted to make a website with Youtube video iframes, which starts to play on hover.
I've found this post Play youtube video on hover
This code works(video start to play on hover) but not all videos work (links seem to be broken).
The same thing happens when I use other videos so that's not broken links. I've found a post suggesting changing 'iframe' into 'embed' and this fixed broken links but then script stops working.
My script looks like below:
https://codepen.io/EwelinaWoloszyn/pen/dybQGWe
<script>$(document).ready(function(){
var nowPlaying = "none";
$('div').hover(function(){
nowPlaying = $(this).find('embed').attr('src');
$(this).find('embed').attr('src',nowPlaying+'&autoplay=1');
}, function(){
$(this).find('embed').attr('src',nowPlaying);
});
});
What should I change to make it work?
Many thanks in advance,
Neko
God forbid me for using W3Schools, but video elements in HTML5 have play() function in JavaScript
Documentation: https://www.w3schools.com/tags/av_met_play.asp
Your code:
$('div').hover(() => {
$(this).find('embed').play();
});
I have some embed code like:
<iframe id="video1" class="video" src=""//www.dailymotion.com/embed/video/VIDEO_ID?autoPlay=1&wmode=transparent&loop=1&controls=0&showinfo=0&api=1&endscreen-enable=0&mute=1" allowfullscreen="true" frameborder="0" width="560" height="349"></iframe>
I am trying to access this video using Javascript but the Video ID is not known in advance (it must be able to be set within our CMS and be changed by any editor). Also it is possible to have more than one video on the page. Hard-coding the video ID(s) in my .js file is not possible.
Using the Javascript API, I need to write a custom play/pause function (passing in the button object they clicked) and also to detect when the video has ended and re-start it (to imitate looping, which Dailymotion apparently does not support for some reason). But it seems a call to:
DM.Player(document.getElementById(iframeID), { video: VIDEO_ID})
requires the video's ID to be known (I do know the iFrame ID where the video is but apparently that isn't enough to access the player like it is for other video platforms).
I then need to be able to create a function to call play or pause based on whether the user has clicked the play/pause toggle on a specific video. My Javascript knowledge isn't great, but I have been able to do this with other platforms by knowing the iframe ID. The play/pause does work if I hard-code a video ID but only if there is one video on the page and only if I do not try to "loop" the video.
This is a private video, if that matters - we want it to only be viewed on our website and not on Dailymotion.
Pseudo-code greatly appreciated as I find their API documentation a bit incomplete for a newcomer (such as not specifying if parameters are required or optional, and not listing available options like for params and events during DM.Player initialization)
EDIT: Here is how I access the video API with other video hosting services (YouTube, Vimeo, Brightcove, etc)
I build an array of all HTML elements with a certain class name (recall there can be more than one video). Say the class name is ".video" so I build an array of all ".video" on the page and their corresponding HTML id. I then use document.getElementById to populate the array with the players.
Then in the play/pause click function, I can access the video like so:
var player = players[index];
var state = player.getPlayerState();
if (state == 1) {
player.pauseVideo();
}
else {
player.playVideo();
}
This does not work for Dailymotion because the actual DM Video ID (and not the HTML element's ID) must be known in advance. I was wondering if there is a way to access the video via the Javascript API without knowing the video ID?
I don't use DailyMotion API but I knocked up this experiment which might be useful to you.
See if the comments in my example code below help you to understand how to use your own buttons with JS functions and how to handle video "end" event etc.
<!DOCTYPE html>
<html>
<body>
<!-- 1. Load DailyMotion API (Javascript) -->
<script src='https://api.dmcdn.net/all.js'> </script>
<!-- 2. Create container for DM Player instance -->
<div id='player'></div>
<!-- 3. Javascript stuff goes here -->
<script>
//Set VIDEO_ID (retrieve or update from your CMS)
//**example** var VIDEO_ID = get_video_id.php **where PHP returns/echo the text of ID**
var VIDEO_ID = "xwr14q"; //update this via your CMS technique
//Create DM Player instance//
var player = DM.player(document.getElementById('player'), {
video: VIDEO_ID,
width: "100%", height: "100%",
params: { autoplay: false, mute: true }
});
//Handle video ending (seek back to zero time)//
player.addEventListener('end', function (evt) { evt.target.currentTime = 0; evt.target.play() } );
//Control functions for DM Player instance//
function func_Play()
{ player.play(); }
function func_Pause()
{ player.pause(); }
</script>
<p>
<!-- Buttons for play pause -->
<button onclick="func_Play()"> PLAY </button>
<button onclick="func_Pause()"> PAUSE </button>
</p>
</body>
</html>
Also regarding
"...It is possible to have more than one video on the page"
Do some "experience quality" tests. Just be sure your users don't mind multiple looping videos running at once (eg: may slow your page / their browser, or drain their data allowance if on mobile, etc).
To handle multiple videos, I would just put each video player in it's own HTML page (like above shown code) and then in main page just load multiple iframes pointing to each player's HTML.
I integrated Vimeo Video in my site and I used 'background= 1' parameter in query string to remove all the default functionalities but it cause a problem that my Video get muted when it loads and I want to unmute the video on page load.
I am beginner so please Give me some good and simple solution keeping in mind that background = 1 should stay there.
Here is what I tried so far:
<script>
var dynamicContent = getParameterByName('background');
$(document).ready(function() {
if (dynamicContent=='1') {
$('#vi-video-1-container').attr('data-audio-volume', 1);
$("#vi-banner-video").vimeo("setVolume", 1);
}
});
</script>
It is my first post, I hope I respected all the rules.
I am trying to publish on a page of my website a:
shuffle / muted / autoplay youtube playlist.
I used the method AS3, with SWFObject.
Everything worked fine with the following code, but since few weeks, the player doesn't detect my playlist and just play the first video.
In the code, the URL is :
https://www.youtube.com/v/HuIGf4IJzdM&list=PLo-QIlIZx6myBxEysxrWoE-f58-psKGji
But when I open the page of the page, it open the following link :
https://www.youtube.com/v/HuIGf4IJzdM&list=o-QIlIZx6myBxEysxrWoE-f58-psKGji
Here is the code wich, if I am not wrong, works fine precedently :
<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<script type="text/javascript">
google.load("swfobject", "2.2");
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.setShuffle(true);
ytplayer.mute();
}
var params = {allowScriptAccess: "always" , allowFullScreen : "true"};
var atts = { id: "myytplayer" };
swfobject.embedSWF("https://www.youtube.com/v/HuIGf4IJzdM&list=PLo-QIlIZx6myBxEysxrWoE-f58-psKGji&index=0&feature=plpp_play_all?enablejsapi=1&playerapiid=ytplayer&allowFullScreen=true&version=3&loop=1&autohide=1",
"ytapiplayer", "50%", "50%", "10", null, null, params, atts)
</script>
Thank you a lot if someone can help me to fin the solution to this problem !!
I finally found an alternative way to make it work with an iframe.
Here is the code :
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.loadPlaylist({'listType': 'playlist',
'list': 'PLo-QIlIZx6myBxEysxrWoE-f58-psKGji',
'index': '0'
});
event.target.mute();
event.target.setLoop(true);
setTimeout( function() {
event.target.setShuffle(true);
}, 2000);
}
</script>
Thank you for the help :-)
...the player doesn't detect my playlist and just play the first video.
Youtube has moved on to the newer iFrame API and that one does allow playlists.
Try this example code below by pasting it here (click "See Result")
<!DOCTYPE html>
<html>
<body>
<iframe width="700" height="400"
src="https://www.youtube.com/embed/HuIGf4IJzdM?list=PLo-QIlIZx6myBxEysxrWoE-f58-psKGji">
</iframe>
</body>
</html>
See how it's within an <iframe> tag? Not SWF, not JS, just working with iFrame. You must add a similar tag to your website code (remove & replace your shown script code).
NOTES :
Also notice the iFrame url begins with
https://www.youtube.com/embed/ this gives you the HTML5 player
meaning it will work on mobile too. Site visitors using phones or
tablets can watch. This is the best working option for all your site
visitors.
If you really want Flash in the iFrame then change beginning to
https://www.youtube.com/v/ this gives you the SWF player which
means it will need the Flash Player plugin (not available on mobile).
People using phones or tablets to visit your site cannot watch
(they get a blank white box or some message like "Plugin not
available").
hiii all,
this is my very first post on stackoverflow, I always used to be a guy sitting back and see what happens here, never contributed, but now i finally got a chance..
MY question is I have a swf file, and I am playing it on my html page using SWFObject,now I want to implement a javascript method which triggers when videos gets completely played or get stopped..
here's my code
<html><head>
<title>PENSIONS BOOST</title>
<script type="text/javascript" src="https://aimhighermarketing.s3.amazonaws.com/videocontrollers/swfobject.js"></script>
</head><body>
<div id="player" align="center">
<script type="text/javascript">
var so = new SWFObject('https://aimhighermarketing.s3.amazonaws.com/videocontrollers/player.swf','mp1','640','480','10');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('frontcolor','FFFFFF');
so.addVariable('lightcolor','FFFFFF');
so.addVariable('screencolor','FFFFFF');
so.addParam('flashvars','&file=HTTP://soci7361#socialnetworkbizbuilder.com/videos/pbsalesvideov2.mp4&&controlbar=none&autostart=true');
so.write('player');</script>
</div>
</body>
</html>
,any kind of help is very much appreciated..
Kindly help..
Thanks
Would love to help you out, but unfortunately you are missing very important information. SWFObject is just a tool to place the object tag safely on the user's browser. Remember those days you had to click on the OBJECT tag in order to activate it? Well, SWFObject fixes that... and much more.
What we need to know is which video player are you using? Flash is actually what fires the events to a javascript, which is what you'd be listening for.
The most popular of them is usually JWPlayer or Flowplayer.
If you can let us know which one it is, or what kind of flash player you are using, I'd be happy to do some quick research for you.
Never mind, I just visited your SWF File and found it is JW Player 4.
Here is the JS Code to listen for event changes:
var player;
function playerReady(object) {
player = document.getElementById(object.id);
player.addModelListener("state","playerStateChanged");
}
function playerStateChanged(obj) {
if (obj.newstate == 'COMPLETED') {
// Your video has finished playing
} else if (obj.oldstate == 'IDLE' AND obj.newstate == 'PLAYING') {
// Your video started to play. Now, this is not fully accurate. IDLE can also mean they pressed STOP and sat there.
}
}
In all reality, you should have a "startedVideo = false;" and on the first play change it to true. Then you'll be able to tell when it was first started playing..
Even though JWPlayer is up to version 5, they do still have a full JS API Doc online:
JWPlayer 4 JavaScript API