随机YouTube视频和API [英] Random youtube video and API
本文介绍了随机YouTube视频和API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< html>
< head>
< title>测试< /标题>
< script type ='text / javascript'src ='http：//www.youtube.com/player_api'>< / script>
< script type =text / javascript>
var player = [
'< iframe width =100％height =100％src =https://www.youtube.com/embed/dxnl-TGq6Sk?autoplay=1& ; modestbranding = 1& autohide = 1& showinfo = 0& controls = 0& iv_load_policy = 3& enablejsapi = 1scrolling - =noframeborder =0id =player>< / iframe>'，
'< iframe width =100％height =100％src =https://www.youtube.com/embed/2dbR2JZmlWo?autoplay=1&modestbranding=1&autohide=1&showinfo = 0& controls = 0& iv_load_policy = 3& enablejsapi = 1scrolling - =noframeborder =0id =player>< / iframe>'
];
函数Random（）{
var rannum = Math.floor（Math.random（）* player.length）;
document.getElementById（'player'）。innerHTML = player [rannum];
}
onload = function（）{Random（）; }
< / script>
<！ - 鼠标 - >
< script language =javascript>
document.onmousedown = disableclick;
function disableclick（event）
{
if（event.button == 2）
{
return false;
}
}
< / script>
<！ - 样式 - >
< style type =text / css>
#overlay {
position：absolute;
top：0;
right：0;
bottom：0;
剩下：0;
margin：auto;
margin-top：0px;
光标：URL（ '数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4 // 8 /岩井/ QL / + TZZdwAAAABJRU5ErkJggg =='），
URL（图像/ blank.cur）
没有！重要的;
}
< / style>
< / head>
< body style =background-color：black; oncontextmenu =返回false>
<？php include_once（analyticstracking.php）？>
< div id =player>< / div>
< div id =overlay>
< / body>
< / html>
解决方案
为什么要刷新页面？也许你的意思是自动播放另一个视频？刷新只会重新加载您的页面，您的所有js代码都会重新加载。 尝试 youtube iframe api 。你可以添加一个事件监听器给你的播放器。加载另一个视频。
// 2.此代码加载IFrame播放器API代码异步。
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.此函数创建一个< iframe> （和YouTube播放器）
// API代码下载后。
var player;
function onYouTubeIframeAPIReady（）{
player = new YT.Player（'player'，{
height：'390'，
width：'640'，
videoId：'6hcSBJFaXGs'，
events：{
'onReady'：onPlayerReady，$ b $'onStateChange'：onPlayerStateChange
}
}）;
}
// 4.当视频播放器准备就绪时，API将调用此函数。
function onPlayerReady（event）{
event.target.playVideo（）;
}
// 5.加载另一个视频，你可以在这里执行你的随机代码。
函数onPlayerStateChange（event）{
if（event.data == 0）{
player.loadVideoById（S176AKQhcCk）;
$ / code $ / pre
<！ - 1.< iframe> （和视频播放器）将取代这个< div>标签。 - >
< div id =player>< / div>
I have been messing around with JavaScript and HTML on my website. I am trying to get it to play a random video from a list I made and when the video ends to refresh the page and play another video. I have been looking at the YouTube embed API but could not get it to work. Bits have this code have been found on other posts. The random video works but not the auto refresh so I left that part out.
<html>
<head>
<title>Test</title>
<script type='text/javascript' src='http://www.youtube.com/player_api'></script>
<script type="text/javascript">
var player = [
'<iframe width="100%" height="100%" src="https://www.youtube.com/embed/dxnl-TGq6Sk?autoplay=1&modestbranding=1&autohide=1&showinfo=0&controls=0&iv_load_policy=3&enablejsapi=1" scrolling-="no" frameborder="0" id="player"></iframe>',
'<iframe width="100%" height="100%" src="https://www.youtube.com/embed/2dbR2JZmlWo?autoplay=1&modestbranding=1&autohide=1&showinfo=0&controls=0&iv_load_policy=3&enablejsapi=1" scrolling-="no" frameborder="0" id="player"></iframe>'
];
function Random() {
var rannum= Math.floor(Math.random()*player.length);
document.getElementById('player').innerHTML=player[rannum];
}
onload = function() { Random(); }
</script>
<!--Mouse-->
<script language="javascript">
document.onmousedown=disableclick;
function disableclick(event)
{
if(event.button==2)
{
return false;
}
}
</script>
<!--Style-->
<style type="text/css">
#overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
url(images/blank.cur),
none !important;
}
</style>
</head>
<body style="background-color:black;" oncontextmenu="return false">
<?php include_once("analyticstracking.php") ?>
<div id="player"></div>
<div id="overlay">
</body>
</html>
解决方案 Why you want to refresh your page? Perhaps what you mean is to auto-play another video? Refreshing would simply reload your page, which all your js code would be reload.
Try youtube iframe api. you can add an event listener to your player. When the video done playing, load another video.
// 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: '390',
width: '640',
videoId: '6hcSBJFaXGs',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. load another video, you can perform your random code here.
function onPlayerStateChange(event) {
if (event.data == 0) {
player.loadVideoById("S176AKQhcCk");
}
}
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
这篇关于随机YouTube视频和API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
