javascript - 将 javascript 模块导入 ASP.NET MVC 项目的问题

Question

我正在开发一个 ASP.NET MVC 应用程序，但在导入 JavaScript 模块时遇到了问题。我有一个 JavaScript 文件，用于控制播放列表的显示，其中包含从 YouTube 捕获的视频。显示控制脚本来自 YouTube API v3 API 本身的示例，我做了一些调整以满足我的需要。我需要的一点是在视频播放完毕时更新数据库中的视频数据。为此，我创建了另一个updateVideo.js文件，该文件导入到.js控制视频播放的文件中。问题是当我导入updateVideo.js模块进入视频播放器，播放器停止工作，浏览器控制台中没有显示错误消息。播放器代码中发生的另一个奇怪的事情是，在导入模块时，一些 YouTube API 变量和方法会变成灰色。我不知道这是否相关。

视频播放器管理器

import { update } from "./updateVideo.js";

// 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);

var videosPlayList = 0;
var currentVideo = 0;
var globalVideos = null;

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    let videos = document.getElementsByClassName('videolink');
    globalVideos = videos;
    videosPlayList = videos.length;
    currentVideo = 0;
    ManagerPlayer(videos[0].id);
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        if (currentVideo < globalVideos.length - 1) {
            var id = globalVideos[currentVideo].id;
            update(id, document.getElementById('playListId').innerHTML);

            ManagerPlayer(globalVideos[++currentVideo].id);
        }
        else {
            alert('Parabéns, playlist finalizada!')
        }
    }
}
function stopVideo() {
    player.stopVideo();
}

function ManagerPlayer(id) {
    if (player == null) {
        CriarPlayer(id);
    }
    else {
        player.destroy();
        CriarPlayer(id);
    }
}

function CriarPlayer(id) {
    player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: id,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function exibirVideo(id) {
    ManagerPlayer(id);
}

视频更新代码

export function update(id, playlistId)
{
    var url = "/Playlist/AtualizaVideo";
    $.post(url, { Id: id, pPlayListId: playlistId }, function (data) {
        $("#msg").html(data);
    });
}

看法

@model ZonaLivre_WebApp.Dommain.Modelos.PlaylistModel

@{
    ViewData["Title"] = "ExibirPlaylist";
}

<h1>Playlist: @Model.NomePlayList</h1>
<span id="playListId" class="hiden">@Model.PlayListID</span>

<main class="container">
    <div class="col">
        <div id="containerDeVideo" class="column">
            <div class="iframe-container" id="player"></div>
        </div>
        <div id="linkVideos" class="linkVideos">
            @if (Model.VideosIdsYoutube.Count > 0)
            {
                foreach (var item in Model.VideosIdsYoutube)
                {
                    <div class="divLink">
                        <a href="#" id=@item.VideoId class="videolink" onclick="exibirVideo(id);">@item.NomeDoVideo</a>
                    </div>
                }
            }
        </div>
    </div>
</main>

@section scripts
{
    <script src="~/js/iFrameYoutube.js" defer></script>
}

标签： javascripthtmlasp.net-mvcyoutube-api