Question

我有一个不使用全屏的网络视图。我将它设置为在网络视图区域播放视频的 Youtube 视频。当我改变设备方向时, 视图会调整大小, 但内容不会。如果我设置比例页面以适应网络视图的旗帜, 它会正确改变方向, 但视频的右侧和底部总是有白色空间, 不论方向如何。

我怎样才能让视频填满网络视图, 并调整方向, 而不浪费版面。或者我如何让视频像在iPhone上一样播放全屏( 这会是我一个可行的选择, 跳过布局问题 ) 。

Answer 1

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

基本上,您可以将包含项的大小设置为用于肖像的一件事和用于景观的一件事。

还设置对象嵌入代码,使高度宽度达到100%,而不是固定宽度。

这是我的 html :

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

这是我的笔记本

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>";

这是我的CS:

.youtube{width:432px; height:245px;}
@media only screen and (orientation:portrait)
{
   .youtube{width:702px; height:398px;}
}

Answer 2

我用下面的代码它对我有用

    // 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];

友情链接