vendredi 24 juin 2016
How to Stop Playing Multiple Videos on iframe at a time on mozila or chrome browser
HI actually when i am using window.onload = setTimeout(onYouTubeIframeAPIReady, 800); its working after hard refresh but not working when first time page load. can you Please Tell me what was wrong here is index.php file
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>youtube Channel Videos</title>
<style>
body{
background: #f4f4f4;
font-family: "Arial" sans-serif;
font-size: 14px;
color: #666;
}
#container{
width: 800px;
overflow: auto;
margin: auto;
background: #fff;
padding: 15px;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script src="js/script.js"></script>
</head>
<body>
<?php
// put your code here
?>
<div id="container">
<h1>Youtube Videos</h1>
<ul id="results">
</ul>
</div>
<script>
$(document).ready(function(){
players = new Array();
alert($("iframe.yt_players"));
function onYouTubeIframeAPIReady() {
var temp = $("iframe.yt_players");
for (var i = 0; i < temp.length; i++) {
var t = new YT.Player($(temp[i]).attr('id'), {
events: {
'onStateChange': onPlayerStateChange
}
});
players.push(t);
}
alert(temp.length);
}
window.onload = setTimeout(onYouTubeIframeAPIReady, 900);
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
var temp = event.target.a.src;
var tempPlayers = $("iframe.yt_players");
for (var i = 0; i < players.length; i++) {
if (players[i].a.src != temp) players[i].stopVideo();
}
}
}
});
</script>
</body>
</html>
script.js file
function tplawesome(template, data) {
// initiate the result to the basic template
res = template;
// for each data key, replace the content of the brackets with the data
for(var i = 0; i < data.length; i++) {
res = res.replace(/{{(.*?)}}/g, function(match, j) { // some magic regex
return data[i][j];
})
}
return res;
}
var channelName= "TechGuyWeb";
$(document).ready(function(){
$.get("https://www.googleapis.com/youtube/v3/channels",{
part: 'contentDetails',
forUsername: channelName,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
$.each(data.items,function(i, item){
var pid = item.contentDetails.relatedPlaylists.uploads;
//console.log(pid);
getvids(pid);
});
}
);
//var pid="TechGuyWeb";
//getvids(pid);
function getvids(pid){
$.get("https://www.googleapis.com/youtube/v3/playlistItems",{
part: 'snippet',
maxResults: 10,
playlistId:pid,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
var output;
$.each(data.items,function(i, item){
//console.log(data);
var v_id = item.snippet.resourceId.videoId;
//alert(item.snippet.resourceId.videoId);
//var video_title = item.snippet.title;
//output= '<li>'+video_title+'</li>';
$.get("item.html",function(data){
$('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId}]));
getcount(v_id);
});
//$('#results').append(output);
});
}
);
}
function getcount(v_id){
$.get("https://www.googleapis.com/youtube/v3/videos",{
part: 'statistics',
id: v_id,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
$.each(data.items,function(i, item){
var views = item.statistics.viewCount;
console.log(views);
$('#'+v_id).append(views);
});
}
);
}
});
item.html file
<div class="item" >
<h2>{{title}}</h2>
<iframe id="player{{videoid}}" class="yt_players" width="640" height="360" src="//www.youtube.com/embed/{{videoid}}?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen onload></iframe>
<div><h5>Total Views: <span id="{{videoid}}"></span></h5> </div>
</div>
Please tell me what was wrong with this code some time worked on mozila correct but some times not same as with chrome
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire