apple blocks auto play of videos. And I get it. But really isn't there something I can do to my code to make it play on of an outside div? I am having a hard time accepting the defeat on this one. Don't like the idea "It cant be done". My users are making a conscious choice when they are clicking that play button any way. So its not really a random auto play on page load. Here is my code. Works like charm on a desktop browser. But really would like to make it work on an ios device
callMain ();
function playerApp(inputVid) {
var player = new YT.Player('player', {
videoId: inputVid,
width:'100%',
height:'90%',
playerVars: {
rel: 0,
controls : 2,
enablejsapi : 1,
origin : document.domain,
wmode : "transparent"
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(e) {
e.target.playVideo();
}
function onPlayerStateChange(e) {
//this removes the player once the video is done
if(e.data == 0){
backgroundOverlay(false);
$('.videoplayer-wrapper').remove();
}
}
function backgroundOverlay(state){
var pageHeight = $( document ).height();
var overlay = '';
var wrapperHTML = ''
+ '<div class="videoplayer-wrapper">'
+ '<div id="player" class="video-player"></div>'
+ '<div class="videoplayer-close videoplayer-toggle">Close</div>'
+ '</div>';
if(state){
overlay = $('body').append('<div class="video-overlay-background" style="height:'+pageHeight+'px;"></div>').append(wrapperHTML);
}else{
overlay = $('.video-overlay-background').remove();
}
return overlay;
}
function callMain () //$(function(){
{
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 inputVid = '';
$('.videoplayer-toggle').on('click', function(){
inputVid = $(this).attr('data-youtubeid');
backgroundOverlay(true);
playerApp(inputVid)
$('.videoplayer-close').on('click', function(){
backgroundOverlay(false);
$('.videoplayer-wrapper').remove()
})
});
}
Here is my jsfiddle
http://jsfiddle.net/sghoush1/zmqj6h1b/
Related
I'm beginning to write a web app that will allow users to annotate embedded YouTube videos with certain events. I'd like the user to be able to pause the video, pull up a menu of candidate events (say, as a modal), and save the selected event along with the associated time in the video that the event occurred to a database.
I don't know how to retrieve the time at which the pause button was pressed.
I'm assuming that the YouTube API would be the place to go for this, but I've spent about two hours exploring and finding no leads. Any advice for approach? Good accessible tutorials/examples of this suitable for beginners?
You can use Youtube iframe API to get the current time on state PAUSED using player.getCurrentTime() :
HTML :
<iframe id="video" src="https://www.youtube.com/embed/CaksNlNniis?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe>
<input id="pause" type="submit" value="pause" />
<input id="play" type="submit" value="play" />
Javascript :
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PAUSED) {
console.log(player.getCurrentTime());
}
}
function onPlayerReady(event) {
document.getElementById("pause").addEventListener("click", function() {
player.pauseVideo();
});
document.getElementById("play").addEventListener("click", function() {
player.playVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
You can find a working jsfiddle here
As the PAUSED state can also be triggered independently from your button click, you can also store the currentTime before you call player.pauseVideo() :
HTML :
<iframe id="video" src="https://www.youtube.com/embed/CaksNlNniis?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe>
<input id="pause" type="submit" value="pause" />
<input id="play" type="submit" value="play" />
<ul id="timing"></ul>
Javascript :
var player;
var timeList;
var count = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {}
function onPlayerReady(event) {
document.getElementById("pause").addEventListener("click", function() {
logTime();
player.pauseVideo();
});
document.getElementById("play").addEventListener("click", function() {
player.playVideo();
});
}
document.addEventListener("DOMContentLoaded", function(event) {
timeList = document.getElementById("timing");
});
function logTime() {
count++;
var time = player.getCurrentTime();
var newTime = document.createElement('li');
var textNode = document.createTextNode('pause ' + count + ' - ' + time + " ");
var buttonNode = document.createElement('button');
buttonNode.addEventListener("click", function() {
console.log("go to " + time);
player.seekTo(time);
player.playVideo();
});
var btnText = document.createTextNode("go back");
buttonNode.appendChild(btnText);
newTime.appendChild(textNode);
newTime.appendChild(buttonNode);
buttonNode.appendChild(btnText);
timeList.appendChild(newTime);
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Check this fiddle
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>
Every second it goes after started playing the video, I want it to run the function which is called showComments
To make sure it's running every second, I just added
alert(getCurrentTime().toFixed());
However, it's not even running :(
How can I make this run showComments function every second?
Here's the demo and codes.
demo: https://jsfiddle.net/f0buajyz/
<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: '270',
width: '480',
videoId: 'mzIdhSTHJts',
});
}
var fixedTimeHtml5Youtube = 0;
function getStatus(){
if(player.getCurrentTime().toFixed() != fixedTimeHtml5Youtube){
alert(getCurrentTime().toFixed());
showComments(player.getCurrentTime().toFixed());
fixedTimeHtml5Youtube = player.getCurrentTime().toFixed();
}
}
</script>
You can use setInterval to run the function every 1000ms(1s), in combination with the onStateChange event.
Whenever the event fires, it checks if the video is playing. If its playing, it starts calling the showComments function every second. Otherwise it stops the interval.
Working fiddle: https://jsfiddle.net/crisbeto/f0buajyz/4/
HTML:
<div id="player"></div>
<textarea id="output"></textarea>
JavaScript:
var tag = document.createElement('script');
var player = null;
var interval = null;
tag.src = "https://www.youtube.com/iframe_api";
document.body.appendChild(tag);
window.onYouTubeIframeAPIReady = function(){
player = new window.YT.Player(document.getElementById('player'), {
height: '270',
width: '480',
videoId: 'mzIdhSTHJts',
events: {
onStateChange: function(event){
callback(event);
}
}
});
}
function callback(event){
var playerStatus = event.data;
// player is playing
if(playerStatus === 1){
interval = setInterval(showComments, 1000);
// player is stopped
}else if(interval){
clearInterval(interval);
}
}
function showComments(){
document.getElementById('output').value += "\n showComments called.";
}
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="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height:'390',
width:'640',
videoId:'A_aYVs_zFA8',
events:{
'onReady':onPlayerReady,
'onStateChange':onPlayerStateChange
}
});
}
function onPlayerReady(event) {
_isPlayerReady = true;
}
function onPlayerStateChange(event) {
switch (event.data) {
case YT.PlayerState.ENDED:
$j = jQuery.noConflict();
$j(".vid-flow").hide();
ShowCustomDialog();
break;
case YT.PlayerState.PLAYING:
break;
case YT.PlayerState.PAUSED:
break;
case YT.PlayerState.BUFFERING:
break;
case YT.PlayerState.CUED:
break;
default:
break;
}
}
</script>
In JavaScript I want to load a youtube player on 'ytplayer' div. I am looking on this https://developers.google.com/youtube/iframe_api_reference#Operations Somebody know how I can remove the name of video.
I tried to get the iframe but if I do iframe my js code will not work. So someone have option to remove the name which is shown In top of youtube video embed.
http://jsfiddle.net/jXWtE/
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'A_aYVs_zFA8',
playerVars: {
'showinfo': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Yusaf Khaliq has the correct answer, but a way to force the embed tag to accept extra arguments after the videoID by changing
videoId:'A_aYVs_zFA8',
to
videoId:'A_aYVs_zFA8?showinfo=0&',
You should be able to string as many arguments as you want in this way, just separate them each by &.
Unfortunately, the showinfo attribute was deprecated as of September 25, 2018. This means that there is no supported mechanism to disable the information at the top of the video anymore using their API.
https://developers.google.com/youtube/player_parameters#showinfo