0

私は HTML5 と jQuery のインタラクティブなビデオ ギャラリーを、チュートリアルから採用した Flash フォールバックと共に使用しています。サイトは流動的です。私はjQueryを知りません.現在提供されているもの（800x450）よりも小さいサイズ（480x272）のビデオを小さなモバイルデバイスで再生しようとしています.

コードを次のように変更しましたが、メディア クエリが認識されません。フォーマット エラーは何ですか?

var videoCode = '<video width="'+480+'" height="'+272+'" controls autoplay autobuffer>
                 <source src="video/'+videoFile+'_small.ogv" type="video/ogg" media="screen and (max-width:500px)">
                 <source src="video/'+videoFile+'_small.mp4" type="video/mp4" media="screen and (max-width:500px)">
                 <video width="'+800+'" height="'+450+'" controls autoplay autobuffer>
                 <source src="video/'+videoFile+'.ogv" type="video/ogg" />
                 <source src="video/'+videoFile+'.mp4" type="video/mp4" />

編集：コーディングレイアウトを修正

4

2 に答える 2

0 
//var videoFile = $(this).attr('videofile');
    var videoFile = (screen.width < 500) ? $(this).attr('videofile') + "_small" : $(this).attr('videofile');
    var videoPoster = $(this).attr('videofile');
    var videoPoster = $(this).attr('videofile');
    var videoWidth = (screen.width < 500) ? 200 : 800;
    var videoHeight = (screen.height < 500) ? 200 : 450;

これが解決策であることが証明されました。

于 2012-05-11T14:09:14.807 に答える
0

コードが欠落しているようですが、要素の属性を追加/更新するには$('someselector').attr('attrname', 'value');

于 2012-04-26T15:27:32.757 に答える