0

HTML5 ビデオの currentTime 属性で問題が発生しました。私の小さなプログラムは、デバイスの解像度に応じて異なるビデオ (異なる解像度) を提供します。window.onload、window.resize、window.orientationchange-Event ごとにデバイスの解像度を確認したい。これらのイベントの後、新しいビデオが提供される可能性があります (より適切な別の解像度で)。0 秒で再びビデオを開始したくないため、イベントの直前にビデオの currentTime をキャプチャしようとしました。私のソリューションは IE 10 でうまく動作します。しかし、他のすべてのブラウザーは失敗します...理由はわかりません..

意地悪しないでください...私はこのWebのすべてに非常に慣れていないので、正直に最善を尽くしています。

あなたの誰かが私を助けてくれることを願っています...

これが私のコードです： 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-    scale=1">
</head>

<body>

    <video id=videoPlayer controls="controls"> </video>


<script>

var pixelRatio = 1.0;
var availScreenWidth;
var availScreenHeight;
var videoResolution;
var type;
var video = document.getElementById('videoPlayer');
var pos;

window.onload = updateVideo;
window.orientationchange = updateVideo;
window.onresize = updateVideo;

function updateVideo(){   

    pos = video.currentTime;

    updateResolution();

    if(availScreenWidth <800){
        videoResolution = '640x360';
    }
    if(availScreenWidth >=800 && availScreenWidth < 1137){
        videoResolution = '960x540';
    }
    if(availScreenWidth >=1137 && availScreenWidth < 1367){
        videoResolution = '1280x720';
    }
    if(availScreenWidth >=1367 && availScreenWidth < 1681){
        videoResolution = '1600x900';
    }
    if(availScreenWidth >= 1681){
        videoResolution = '1920x1080';
    }

    if (video.canPlayType("video/webm") == 'maybe' || video.canPlayType("video/webm") == 'probably') {
        type = '.webm';
    }
    else if (video.canPlayType("video/mp4") == 'maybe' || video.canPlayType("video/mp4") == 'probably') {
        type = '.mp4';
    }

   video.src = videoResolution + type;

    video.addEventListener('loadedmetadata', function() {
        video.currentTime = pos;
        video.play();}, false);

    }

    video.load();


function updateResolution(){

    if (window.devicePixelRatio){
        pixelRatio = window.devicePixelRatio;
    }
    availScreenWidth = document.documentElement.clientWidth * pixelRatio;
    availScreenHeight = document.documentElement.clientHeight * pixelRatio;

}



</script>

</body>
</html>
4

1 に答える 1

0

への呼び出しvideo.load()は の外側にありupdateVideo()ます - タブが少し不均一であるため、それを確認するのは困難です。そのため、更新イベントが発生したときに、ビデオのソースが実際には更新されない場合があります。その呼び出しをそのイベント ハンドラー関数の中に入れてみてください。

ただし、いったん機能するようになると、多くの中断や必要以上の更新が発生することがあります。同様の状況を実験したところ、更新のサイズ変更を抑制できることがわかりました。関数が終了したら、タイムスタンプを保存します。次にサイズ変更イベントを取得したときに、それが 100ms ～ 300ms 程度未満であった場合は、タイムアウト リターンを早めに設定します。(未処理のタイムアウトも必ずクリアしてください。) そうすれば、ユーザーがウィンドウ サイズをドラッグしたときに何度も更新する必要がなくなります。

于 2013-01-30T20:24:52.990 に答える