@using WeApp.Helpers
@{
    string id = "scene-play";
    string playIcon = "<div class=\"play-icon\"><i class=\"fas fa-play\"></i></div>";
    string playDiv = $"<div class=\"media-box\">{playIcon}</div>";
}
<style>
</style>
@Html.Partial("__/_AreaBox", $"情景视频#{id}#{playDiv}")
@using (Html.BeginScripts())
{
    <script id="attach-script">
        var attach_play_timer;
        var imageTemplate = '<img src="{0}" style="width: 100%;height: 100%;" />',//muted
            videoTemplate = '<video id="video" style="width: 100%;height: 100%;" controls muted autoplay><source src="{0}"  type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video>',
            audioTemplate = '<audio id="video" style="width: 100%;height: 100%;" controls muted autoplay><source src="{0}" type="audio/mp3">您的浏览器不支持 HTML5 audio 标签。</audio>';
        var $playBox = $('#@id .media-box');

        window.Scroll2Bottom($('#@id').find('.scroll-box'));

        function PlayNext() {
            if (window.isPlaying) {
                return;
            }
            $(".attach").removeClass("playing");
            if (window.waitToPlayAttachList && window.waitToPlayAttachList.length) {
                var nextAttach = window.waitToPlayAttachList.shift();
                if (nextAttach) {
                    Play(nextAttach.filePath, nextAttach.fileType, nextAttach.attachNo);
                }
            } else {
                $playBox.fadeOut(300,
                    () => {
                        $playBox.html('@Html.Raw(playIcon)').fadeIn();
                    });
            }
        }

        function Play(path, type, no) {
            @*@if (IwbConsts.IsDebug){
                <text>
                    path = "http://shvber.com:5028/" + path;
                </text>
            }*@
            if (type) {
                window.isPlaying = true;
                //var str = type === "image"
                //    ? imageTemplate.format(path)
                //    : type === "video"
                //    ? videoTemplate.format(path)
                //    : type === "audio"
                //    ? audioTemplate.format(path)
                //            : '';
                if (type == "image") {
                    var str = imageTemplate.format(path);
                    $playBox.fadeOut(300,
                        () => {
                            $playBox.html(str).fadeIn();
                            clearTimeout(attach_play_timer);
                            attach_play_timer = setTimeout(() => {
                                    window.isPlaying = false;
                                    PlayNext();
                                },
                                1000 * 15);
                        });
                } else if (type === "video" || type === "audio") {
                    $playBox.fadeOut(300,
                        () => {
                            var video = document.createElement("video");
                            var hasLoad = false;
                            video.loop = false;
                            //video.muted = true;
                            video.controls = true;
                            video.src = path;
                            video.style.width = '100%';
                            video.style.height = '100%';
                            video.addEventListener("loadstart", () => { hasLoad = false; },false);
                            video.addEventListener('durationchange', () =>  { hasLoad = true; },false);
                            video.addEventListener('ended', () => { setTimeout(function () { window.isPlaying = false; PlayNext(); }, 1000 * 0.5); }, false);
                            setTimeout(() => { if (!hasLoad) { window.isPlaying = false; PlayNext(); } }, 1000 * 3);
                            $playBox.html(video).fadeIn();
                            video.play();
                        });

                }
                $(".attach").removeClass("playing");
                if (no) {
                    $("#" + no).addClass('playing');
                }
                //$playBox.fadeOut(300,
                //    () =>  {
                //        $playBox.html(str).fadeIn();
                //        if (type === "video") {
                //            var video = document.getElementById("video");
                //            if (video) {
                //                try {
                //                    var hasLoad = false;
                //                    video.loop = false;
                //                    video.addEventListener("loadstart", () => { hasLoad = false; },false);
                //                    video.addEventListener('durationchange', () =>  { hasLoad = true; },false);
                //                    video.addEventListener('ended', () => {
                //                            setTimeout(function() {window.isPlaying = false;PlayNext();},
                //                                1000 * 0.5);
                //                        },
                //                        false);
                //                    setTimeout(() =>  {
                //                        if (!hasLoad) {
                //                            window.isPlaying = false; PlayNext();
                //                        }
                //                    }, 1000 * 3);
                //                    //video.play();
                //                    //setTimeout(() => {video.pause();video.load();},10);

                //                } catch (e) {
                //                    console.log(e);
                //                    setTimeout(() =>  {window.isPlaying = false;PlayNext();},1000 * 0.5);
                //                }
                //            } else {
                //                setTimeout(() => {window.isPlaying = false;PlayNext();},1000 * 0.5);
                //            }
                //        } else if (type === "image") {
                //            clearTimeout(attach_play_timer);
                //            attach_play_timer = setTimeout(() => {window.isPlaying = false;PlayNext();},1000 * 15);
                //        }else if (type === "video") {

                //        }
                //    });
            }
        }

        function PlayLoop(url, type) {
            type = type || "video";
            $playBox.fadeOut(300,
                () => {
                    var video = document.createElement(type);
                    video.loop = true;
                    //video.muted = true;
                    video.controls = true;
                    video.src = url;
                    video.style.width = '100%';
                    video.style.height = '100%';
                    $playBox.html(video).fadeIn();
                    video.play();
                });
        }
    </script>

}