动态更改视频时,onStateChange事件不起作用

时间:2018-08-09 07:46:26

标签: c#

我想创建一个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>

0 个答案:

没有答案