2

我有一个不占用全屏的网络视图。我将它的 url 设置为 youtube 视频以在网络视图区域中播放视频。当我更改设备的方向时，视图会调整大小，但内容不会。如果我将比例页面设置为适合 Web 视图上的标志，它会正确更改方向，但无论方向如何，右侧和底部的视频周围总是有空白区域。

如何让视频填充 Web 视图，并在不浪费填充的情况下通过方向更改调整大小。或者，如何让视频像在 iPhone 上一样全屏播放（这对我来说是一个可行的选择，跳过布局问题）

4

2 回答 2

1

I read this tutorial and was able to solve the problem. http://webdesignerwall.com/tutorials/css-elastic-videos

basically you can set the size of the containing item to one thing for portrait and another for landscape.

Also set your object embed code to have a height width of 100% instead of a fixed width.

This is my html:

<span class="youtube">
    <object type="application/x-shockwave-flash" id="ytPlayer" style="visibility: visible;" allowscriptaccess="always">
    </object>
</span>

This is my javascript:

var ytswf = document.getElementById('ytPlayer');
var videoID = 'Nky9omXFZD4';
ytswf.outerHTML = "<object height=\"100%\" width=\"100%\" type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/" + videoID + "&amp;enablejsapi=1&amp;playerapiid=ytplayerObj&amp;rel=0&amp;fs=1&amp;autoplay=0&amp;egm=0\" id=\"ytPlayer\" style=\"visibility: visible;\" ><param name=\"allowFullScreen\" value=\"True\" /><param name=\"allowScriptAccess\" value=\"always\" /></object>";

This is my css:

.youtube{width:432px; height:245px;}
@media only screen and (orientation:portrait)
{
   .youtube{width:702px; height:398px;}
}
于 2012-10-17T16:41:03.323 回答
0

我使用以下代码，它适用于我

    // css
    // You can add your own width and height values or insert this values using stringWithFormat
    NSString *css = @"<style type=\"text/css\">\
    .youtube{width:320px; height:363px;}\
    @media only screen and (orientation:portrait) { \
    .youtube{width:320px; height:363px;}\
    }\
    \
    @media only screen and (orientation:landscape) {\
    .youtube{width:480px; height:203px;}\
    }\
    </style>\
    ";

    // different format of urls for iOS 5 and iOS 6
    NSString *src = ([[[UIDevice currentDevice] systemVersion] compare:@"6" options:NSNumericSearch] == NSOrderedAscending)
    ? @"http://www.youtube.com/watch?v=%@?autoplay=1"        //  iOS  5
    : @"http://www.youtube.com/v/%@?autoplay=1";             //  iOS  6

    // inserting css in <head> and inserting src
    NSString *youTubeVideoHTML =  [NSString stringWithFormat:
                                   (@"<html><head>%@</head>\
                                    <body style=\"margin:0\">\
                                    <embed class=\"youtube\" id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \
                                    ></embed>\
                                    </body></html>") , css , src  ];
    // setting YouTube video ID
    finalHtml = [NSString stringWithFormat: youTubeVideoHTML , videoID ];

    [self.webView loadHTMLString:finalHtml baseURL:nil];
于 2013-01-22T11:48:37.090 回答