我想创建一个Web表单,其中预定义了iframe,并且在链接的单击时视频发生了变化,但是当视频发生变化时,onStateChange不会触发,并且我无法获得当前状态以及播放视频的持续时间和当前时间。 我想获取状态更改时播放视频的持续时间和当前时间。 我该如何解决此问题,请帮忙...
请在下面找到代码
<a onclick="changeVideo('K68UrdUOr2Y')" style="cursor: pointer;">
<img src="IMAGES/New/New_Image01.jpg" class="img-responsive" style="width: 100%;
height: 100%;" />
</a>
<iframe id="iframe" width="100%" height="315" class="img-rounded" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen src="https://www.youtube.com/embed/RQtFp3wY0SQ?enablejsapi=1">
</iframe>
<script type="text/javascript">
var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var videoID;
var player;
function changeVideo(vId) {
stopVideo();
videoID = vId;
var iframe = document.getElementById("iframe");
iframe.src = "https://www.youtube.com/embed/" + vId + "?enablejsapi=1";
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('iframe', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange} });
}
function onPlayerReady(event) {
playVideo();
}
function onPlayerStateChange(event) {
alert(event.data);
}
function stopVideo() {
var Duration = !player.getDuration ? 0.0 : player.getDuration();
var CurrentTime = !player.getCurrentTime ? 0.0 : player.getCurrentTime();
var percent = (CurrentTime / Duration) * 100;
document.getElementById('<%=txtVideo.ClientID %>').value = videoID;
document.getElementById('<%=txtDuration.ClientID %>').value = Duration.toFixed(2);
document.getElementById('<%=txtCurrentTime.ClientID %>').value = CurrentTime.toFixed(2);
document.getElementById('<%=txtCurrentTimePercentage.ClientID %>').value = percent.toFixed(2);
player.stopVideo();
}
function playVideo() {
// player.playVideo();
}
</script>