如何为YouTube视频创建快退功能 [英] How do I create a Rewind Functionality for YouTube video
本文介绍了如何为YouTube视频创建快退功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
朋友们，我想开发一种倒带功能，当我单击倒带按钮时，在I帧倒带中显示的YouTube视频倒带10秒钟，但我却无法获得.如果您有任何解决方案，请问如何创建该倒带功能，请分享很快和我在一起.
Hi Friends I want to develop a rewind functionality that when i clicked on rewind button the YouTube Video which is shown in I-frame rewind for 10 sec But I could not get How can I Create this If you have any solution Please share with me soon.
这是我的代码.
[![<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Youtube videos proxy server</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<?php
$val="";
$vid="0TvTyj5FAaQ";
$str = file_get_contents('video.json');
$json = json_decode($str, true);
foreach ($json as $value) {
if($value\["id"\]==$vid){
$val="TRUE";
break;
}else{
continue;
}
}
if($val=="TRUE"){ ?>
<div>
<div style="height: 345px;width: 700px;background: black;">
<span style="color: white;">This video has restricted content.</span>
</div>
</div>
<?php }else{
?>
<div id="player">
<iframe id="player" width="700" height="345" src="https://www.youtube.com/embed/<?php echo $vid?>?enablejsapi=1&showinfo=0&rel=0"> </iframe>
<br/>
<button id='rwnd' onclick="rewind()" >Rewind</button>
</div>
<?php } ?>
<script type="text/javascript">
var player=document.getElementById("player");
var rewind= function(){
if (! player){alert("no obj");
}else{
alert('hello');
var currentTime = player.getCurrentTime();
console.log(currentTime);
if(currentTime>5){
player.seekTo(currentTime - 5, true);
player.playVideo();
}
}
};
</script>
</body>
</html>][1]][1]
这是video.json文件.
Here is video.json file.
[
{
"id": "0dV1Bwe2v6c"
},
{
"id":"0dmhKtQ74wo"
},
{
"id":"0dV1Bwe2v6c"
}
]
推荐答案
朋友我现在得到了答案，希望它也能对您有所帮助.json文件与我在代码中添加的问题相同.
Friends I got the answer now hope it will help you too. json file is same as in the question i added in code.
这是解决方案....
Here is the solution....
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Youtube videos proxy server</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<?php
$val="";
$vid="0TvTyj5FAaQ";
$str = file_get_contents('video.json');
$json = json_decode($str, true);
foreach ($json as $value) {
if($value["id"]==$vid){
$val="TRUE";
break;
}else{
continue;
}
}
if($val=="TRUE"){ ?>
<div>
<div style="height: 345px;width: 700px;background: black;">
<span style="color: white;">This video has restricted content.</span>
</div>
</div>
<?php }else{
?>
<div id="player1">
<iframe id="player" width="700" height="345" src="https://www.youtube.com/embed/<?php echo $vid?>?enablejsapi=1&showinfo=0&rel=0"> </iframe>
<br/>
<button id='rwnd' disabled>Rewind</button>
</div>
<?php } ?>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
events: {
'onStateChange': onPlayerReady
}
});
}
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#rwnd').prop('disabled', false);
$( "#rwnd" ).click(function() {
rewind();
});
}else{
$('#rwnd').prop('disabled', true);
}
}
function rewind(){
var currentTime = player.getCurrentTime();
if(currentTime>10){
player.seekTo(currentTime - 10, true);
player.playVideo();
}else{
player.stopVideo();
console.log("Try to rewind video when current playing time greater than 10.");
}
};
</script>
</body>
</html>
这篇关于如何为YouTube视频创建快退功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
