Geek Answers Handbook

HTML 5 Video in UIWebview Orientation Landscape

I have an iPhone app where each view is in portrait. I have a UIWebview with some HTML code. At the same time, there is a video with the html5 tag. When I play this video, it only plays on portraits. To make it work in the landscape, I have to return YES for shouldAutorotateToInterfaceOrientation in the viewcontroller, but I do not want the viewcontroller to rotate to the landscape. I want the video to support landscape orientation.

Maybe?

Thanks!

+7
iphone video uiwebview orientation landscape
source share
2 answers

I have the same problem, interesting, but if you use embed tags and not video tags, this works, but you won’t get a nice image!

<embed src='yourmovie.mp4' width='280px'></embed>
+1
source share

if you have javascript available to you or some other scripting mechanism, have you tried to provide a video element and insert the element to the id attribute and access the DOM with javascript to set the attributes?

 <body> <video id="myvideo" width="240" height="320" src="a.vp8"> <embed id="myvideoe" width="240" height="320" src="a.vp8"> </video> <script type="text/javascript"> if (window.screen.width < window.screen.height) { //portrait document.getElementById('myvideo').setAttribute('width', 240); document.getElementById('myvideo').setAttribute('height', 320); document.getElementById('myvideoe').setAttribute('width', 240); document.getElementById('myvideoe').setAttribute('height', 320); } else { //landscape document.getElementById('myvideo').setAttribute('width', 320); document.getElementById('myvideo').setAttribute('height', 240); document.getElementById('myvideoe').setAttribute('width', 320); document.getElementById('myvideoe').setAttribute('height', 240); } //or simply do this if you have differing size target screens: //you can always subtract out the space for the controls. document.getElementById('myvideo').setAttribute('width', window.screen.width); document.getElementById('myvideo').setAttribute('height', window.screen.height); document.getElementById('myvideoe').setAttribute('width', window.screen.width); document.getElementById('myvideoe').setAttribute('height', window.screen.height); </script> </body>

if you are talking about changing src to a completely different video, which is a landscape or portrait, which is also possible. I think this is only possible with PhoneGap, which provides javascript.

+1
source share

More articles:


All Articles