1

キャンバスにビデオを表示する簡単なサイトに取り組んでいます。ビデオは表示されますが、最初のフレームで動かなくなります。コントロールが設定されていて、自動再生が表示されず、ビデオも再生されません。

<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>

@section Scripts
{
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript">        </script>
<script type="text/javascript">
    window.addEventListener('load', eventWindowLoaded, false);
    var firstVideo, secondVideo, videoSource
    var videoDiv;
    function eventWindowLoaded() {
        firstVideo = document.createElement("video");
        videoSource = document.createElement("source");
        firstVideo.appendChild(videoSource);
        //secondVideo = document.createElement("video");
        videoDiv = document.createElement('div');
        document.body.appendChild(videoDiv);
        videoDiv.appendChild(firstVideo);
       //videoDiv.appendChild(secondVideo);
        videoDiv.setAttribute("style", "display:none;");
        var videoType = supportedVideoFormat(firstVideo);       
        if (videoType == "") {
            alert("no video support");
            return;
        }
        videoSource.setAttribute("src", "/Content/QualitySample." + videoType);
        videoSource.setAttribute("type", "video/mp4");
        firstVideo.setAttribute("controls", "controls");
        firstVideo.setAttribute("autoplay", "autoplay");
        firstVideo.addEventListener("canplaythrough", videoLoaded, false);
        //secondVideo.setAttribute("src", "/Content/QualitySample." + videoType);
        //secondVideo.setAttribute("controls", "controls");
        //secondVideo.addEventListener("canplaythrough", videoLoaded, false);


    }

    function supportedVideoFormat(video) {
        var returnExtension = "";
        if (video.canPlayType("video/mp4") == "probably" ||
       video.canPlayType("video/mp4") == "maybe") {
            returnExtension = "mp4";
    } else if (video.canPlayType("video/webm") == "probably" ||
   video.canPlayType("video/webm") == "maybe") {
        returnExtension = "webm";
    } else if (video.canPlayType("video/ogg") == "probably" ||
   video.canPlayType("video/ogg") == "maybe") {
        returnExtension = "ogg";
    }


    return returnExtension;

}

function canvasSupport() {
    return Modernizr.canvas;
}

function videoLoaded(event) {

    canvasApp();

}

function canvasApp() {

    if (!canvasSupport()) {
        return;
    }

    function drawScreen() {

        //Background
        context.fillStyle = '#ffffff';
        context.fillRect(0, 0, theCanvas.width, theCanvas.height);
        //Box
        context.strokeStyle = '#000000';
        context.strokeRect(5, 5, theCanvas.width - 10, theCanvas.height - 10);
        //video
        context.drawImage(firstVideo, 60, 50, 200, 200);
        //context.drawImage(secondVideo, 260, 50, 200, 200);

    }

    var theCanvas = document.getElementById("canvasOne");
    var context = theCanvas.getContext("2d");
    //firstVideo.load();
    firstVideo.play();
    //secondVideo.play();
    setInterval(drawScreen, 33);

}

ページが読み込まれると、ビデオがキャンバスに表示され、ビデオが読み込まれますが、アクティブなコントロールはなく、再生もされません。

4

1 に答える 1

1

MP4 はメディア ファイルの種類です。ただし、MP4 は任意の数の異なるコーデックをサポートできます。一部のコーデックは特許によって保護されているため、Chrome では特定のコーデックを使用できない場合があります。ビデオのコーデックがサポートされていることを確認してください。

参照: http://news.cnet.com/8301-30685_3-20028196-264.html

編集：Googleがコーデックをサポートするために料金を支払いたくないという意味で「保護されている」という意味であり、Chromeがそのコーデックを処理できなかったという意味ではありません。

于 2012-05-31T20:19:55.823 に答える