4

Metro アプリで YouTube ビデオを再生したいと考えています。YouTube Iframe API( Link ) を使用して、アプリに YouTube ビデオを埋め込みます。次に、メモリリークの深刻な問題に遭遇します。YouTube の動画を埋め込んで削除すると、メモリが 5MB ほど増加し、それ以上神経質になります。デモコードはこちら: default.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframeTest</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- iframeTest references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body style ="">
<button id="remove" style="display:block; float:left;">remove a video</button>
<button id="add" style="display:block; float:left;">add a video</button>
</body>
</html>

default.js フラグメント:

document.getElementById("remove").addEventListener("click", function () {
    var ifrs = document.querySelectorAll('div');
    if (ifrs.length > 0) {
            document.body.removeChild(ifrs[ifrs.length - 1]);
        }
    });
    document.getElementById("add").addEventListener("click", function(){
        var testYoutubeDiv = document.createElement('div');
        testYoutubeDiv.style.cssFloat = 'left';
        testYoutubeDiv.style.width = '400px';
        testYoutubeDiv.style.height = '300px';
        MSApp.execUnsafeLocalFunction(function () {
            testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>";

        });
        document.body.appendChild(testYoutubeDiv);
    });

次に、同様の .html ファイルを作成し、IE10.0 と Chrome でテストします。IE10.0 にもメモリ リークの問題がありますが、chrome にはありません。また、IE10.0 のメモリ リークの問題は、Metro アプリほど深刻ではありません。テストHTMLコードはここにありました：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframeTest</title>
<script type = "text/javascript">
function load() {
    document.getElementById("remove").addEventListener("click", function () {
        var ifrs = document.querySelectorAll('div');
        if (ifrs.length > 0) {
            document.body.removeChild(ifrs[ifrs.length - 1]);
        }
    });
    document.getElementById("add").addEventListener("click", function () {
        var testYoutubeDiv = document.createElement('div');
        testYoutubeDiv.style.cssFloat = 'left';
        testYoutubeDiv.style.width = '400px';
        testYoutubeDiv.style.height = '300px';
        testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>"; 
        document.body.appendChild(testYoutubeDiv);
    });
}
</script>
</head>
<body onload ="load()">
<button id="remove" style="display:block; float:right;">remove a video</button>
<button id="add" style="display:block; float:right;">add a video</button>
</body>
</html>

IE (およびおそらく Metro App) は WebKit エンジンを使用して JavaScript コードを処理していないことに気付きました。Metro アプリでメモリ リークを減らす方法はありますか?

4

1 に答える 1

1

HTMLファイルでiframeを作成する

<iframe id="ifr_video"></iframe>

次に、javascript を使用してその iframe にソースを追加します。ソースを追加しながら、分割して YouTube URL の ID を見つけます。たとえば、YouTube URL がhttp://www.youtube.com/watch?v=ZnehCBoYLbcの場合、ID は ZnehCBoYLbc です。 、次に、ID を見つけてソースを追加するために、次のようにソースを定義します

var Url_splits = Youtube_Video_url.split("/");
var Url_length = Url_splits.length;
var Ytube_id = Url_splits[(Url_length - 1)];
document.getElementById("ifr_video").src = "http://www.youtube.com/embed/" + Ytube_id;

HTMLで

        <video id="VideoSource" style="border:1px solid black;"  controls="controls" ></video>
        <iframe class="youtube-player" id="ifr_video" type="text/html" width=100% height=100% allowfullscreen frameborder="0"></iframe>

JSの場合（ready関数内）

id("VideoSource").msPlayToSource.connection.addEventListener("statechanged", playToSrcStateChangeHandler);

        function playToSrcStateChangeHandler(eventIn) {
                var states = Windows.Media.PlayTo.PlayToConnectionState;
                if (eventIn.currentState === states.disconnected) {
                    WinJS.log && WinJS.log("PlayTo connection state: Disconnected", "sample", "status");
                } else if (eventIn.currentState === states.connected) {
                    WinJS.log && WinJS.log("PlayTo connection state: Connected", "sample", "status");
                } else if (eventIn.currentState === states.rendering) {
                    WinJS.log && WinJS.log("PlayTo connection state: Rendering", "sample", "status");
                }
            }

        Video_Path = "http://www.youtube.com/embed/" + new_id;

        //new_id is the Youtube video id For example,..
        in http://www.youtube.com/watch?v=ZnehCBoYLbc ,  id is ZnehCBoYLbc            

        function playYouTubeVideo(Video_Path) {
                document.getElementById("ifr_video").src = Video_Path;
                id("VideoSource").style.display='none';
            }

        function playWebContent(Video_Path) {
                document.getElementById("ifr_video").style.display = 'none';
                var localVideo = id("VideoSource");
                var videoStabilization = Windows.Media.VideoEffects.videoStabilization;

                localVideo.src = Video_Path;
                localVideo.play();
            }

参照: http://code.msdn.microsoft.com/windowsapps/Media-PlayTo-Sample-fedcb0f9

于 2013-04-23T12:28:12.550 に答える