Im trying force autoplay when the youtube video is ready.
<html>
<body>
<div id="player"></div>
<br/>
<button id="botaoPlay" onclick="playMusic()">play</button>
<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;
var timeout = null;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: '8t3EHHhkC34',
playerVars: { autoplay: 1 , enablejsapi: 1, playsinline: 1, origin: 'http://localhost' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.setVolume(65);
if(!timeout)
timeout = setInterval(playMusic, 1000);
}
function playMusic() {
if (player) {
player.playVideo();
}
}
function onPlayerStateChange(event) {
console.log("status changed: " + player.getPlayerState());
if( player.getPlayerState() == 1 ){
clearInterval(timeout);
}
}
</script>
</body>
</html>
But the video only starts if i click on button... how can i start the video? I tried instead call playVideo() in interval, call button.click() but didnt work too, only if i click with mouse in button. How can i start my video without click on button?
Related
Use owl slider 2
Can not remove sound for video YouTube in slider.
For iframe video in owl-slider, registered &enablejsapi = 1 for api youtube
'<iframe id="ytplayer" type="text/html" width="' + g + '" height="' + h + '" src="//www.youtube.com/embed/' + f.id + "?autoplay=1&enablejsapi=1&v=" + f.id + '" frameborder="0" allowfullscreen></iframe>'
Code api YouTube
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
playerVars: {
'autoplay': 1,
'controls': 0,
'loop': 1
},
//videoId: 'EqK6x4seeOA',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
}
var doneY = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !doneY) {
doneY = true;
}
event.target.setVolume(0);
}
Assembled code
Code Slider owl 2 + api video YouTube
But api does not connect to the slider, tell me what the problem may be.
Thank you
You are mixing two sets of players.
iFrame embed is stand alone, but with enablejsapi=1 means that you can target it with JavaScript.
The second block of code you have is a constructor that will dynamically make an iFrame for you without the need to set enablejsapi=1 as it is automatically set. But you can infer if you wish.
This is what you should have (or need to use ).
<!-- 1. The <div> tag will contain the <iframe> (and video player) -->
<div id="ytplayer"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var ytplayer;
function onYouTubePlayerAPIReady() {
ytplayer = new YT.Player('ytplayer', {
height: '385',
width: '640',
videoId: '<?php echo $videoID2 ?>',
playerVars: {listType:'playlist', list: '', 'wmode': 'opaque', 'controls': 1 , 'enablejsapi': 1 , 'origin': 'http://www.yoursite.com', 'autohide': 1 , 'frameborder': 1 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
// event.target.setVolume(100);
// event.target.playVideo();
event.ytplayer.cueVideoById(id, startSeconds);
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
</script>
so I'm using the Youtube iFrame API to give me an alert when the video stops playing with the following code:
<div id="player"></div>
<script type="text/javascript">
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: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
playerVars: {
'autoplay': 1,
'controls': 1,
'html5': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var playerReady = false;
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
playerReady = true;
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
alert('done');
}
}
I tried this same code on jsfiddle: (http://jsfiddle.net/QtBlueWaffle/8bpQ8/1/) and it works fine there. Doesn't work on my local machine though. Any ideas?
i need to show a popup when youtube video finish it works fine for the alert() but when i tried to make magnific popup instead if the alert it dosen't work here is my code
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '600',
width: '600',
videoId: 'id',
playerVars: { 'autoplay':"0", 'controls':"1" },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var playerReady = false;
function onPlayerReady(event) {
playerReady = true;
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED ) {
$.magnificPopup.open({
items: {
src: 'mylink to the pic'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0); }
}
</script>
<div id=player></div>
<div id=playvideo style= "width:40px; height:80px; background-color:#2b2b2b;" >
<script src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
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: '448',
width: '763',
playerVars: {
'showinfo': 0,
'controls': 0,
listType: 'playlist',
list: 'PLD7SqVUGDdDBw_xmMKTDF5MlBwys_KlUk'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
// event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.stopVideo();
}
}
</script>
I have an embed code like that, and I want the div named "playvideo" acts like YouTube's play button, I think it's an easy one but I'm new on JavaScript, can anybody have an idea?
Well you can use YouTube's Player API function:
player.playVideo()
So ... HTML:
<div id="mydiv" onclick="play_this_video()">Play my video</div>
and JavaScript:
function play_this_video(){
player.playVideo();
}
I'm trying to render a Youtube video after the user has submitted its URL with .focusout()
$('#page_video').focusout(function(){
var video_url = $(this).val();
var video_id = youtubeLinkParser(video_url);
renderVideo(video_id); // This is where I'd like to load video
});
I am using the Youtube API and the code recommended here (also see below)
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady(video_id) {
player = new YT.Player('player', {
height: $(window).height(),
width: $(window).width(),
videoId: video_id,
playerVars: {
'autoplay': 0,
'controls': 0,
'loop': 1,
'showinfo': 0,
'modestbranding': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
event.target.mute();
}
// The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
}
function stopVideo() {
player.stopVideo();
}
How do I call the video to render on focusOut(), I haven't had any luck putting the Youtube API code in a function and calling it.
Can this be done?
Thanks
This works for me:
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady(video_id) {
player = new YT.Player('player', {
height: $(window).height(),
width: $(window).width(),
videoId: video_id,
playerVars: {
'autoplay': 0,
'controls': 0,
'loop': 1,
'showinfo': 0,
'modestbranding': 1
}
});
}
function stopVideo() {
player.stopVideo();
}
function youtubeLinkParser(string){
var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
return (string.match(p)) ? RegExp.$1 : false ;
}
function renderVideo(id){
player.loadVideoById(id);
}
$('#page_video').focusout(function(){
var video_url = $(this).val();
var video_id = youtubeLinkParser(video_url);
renderVideo(video_id); // This is where I'd like to load video
});