I am currently developing an samsung smart tv app using the sdk 3.5.2 (as required)
I am using the SEF plugin and with setDisplayArea(), I am able to display a full screen video.
But now I am facing problem that I would like to overlay 2 divs, a header and a footer, on top of the video, but I could not have it done correctly.
What have I tried and got is desribed as follow:
In my html, I have include the plugin, and got the player object z-index and position set
<object id="pluginPlayer" border=0 classid="clsid:SAMSUNG-INFOLINK-PLAYER"
style="position:absolute;z-index:10;left:0px;top:0px;width:1280px;height:720px;"></object>
<object id="pluginAudio" border=0 classid="clsid:SAMSUNG-INFOLINK-AUDIO"></object>
<object id="pluginTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"></object>
In my css, I have set the z-index of the header div
#SplashHeader{
position: absolute;
top:0px;
left:0px;
height:40px;
width: 1280px;
background: grey;
z-index: 100;
}
In my Js, I have called the setdisplayarea()
this.plugin.SetDisplayArea(0, 0, 960, 540);
(To sidetrack, here's another question I do not quite understand as the API states the width and height parameter of this function must not exceed 960 * 540, but I am currently developing for a 1280 * 720 machine...so I do not know is it correct to set it 960 * 540)
And I got the header shown successfully, however the video itself auto-scale and show below the header, which is not quite follow my expectation.
(I expect the video still be shown full screen with a header show on top of it, but not make the video auto-scale and shrink vertically..)
Anyone can give me advice? Thanks!
The SEF player is located in the most back of display layers so you don't need to specify any z-index there. Also if possible please don't use z-index more than 99 in Samsung TV Apps, some resources said that 100 and above are used for Samsung native display such as IME and Popup.
And for video display on 1280x720 resolution is a bit tricky. The video display is always full screen on 960x540 whether you're using 720p or 540p mode. The video will be stretched to 1280 from 960 or the ratio is 0.75. If you want to display width of video for 640x720 pixel then the size of video is 480x540.
Last advice:
call setdisplayarea again after play function
do test on real device (emulator sometimes lie on video display)
Related
on my site I have an iFrame which contains products that I sell.
When viewed on a desktop PC it's fine, but when viewed on a mobile / tablet device the image doesn't resize properly. The image in the iframe is blurred because it has been stretched to fit the screen. If you rotate the device or resize the screen by even a pixel it fixes it.
An example product is here:
Click and view as a mobile device
I have a css attached to the iframe so I can control what happens inside, but I can't figure this one out.
I've applied this to the canvas but it just stretches the image, it doesn't resize it:
height:100% !important;
width:100% !important;
It seems to be getting controlled by some js from the origin server, is there something simple that I'm missing here?
Thanks in advance
Chris
Try using attributes height="100%" width="100%"
Using AMP version 2.0.0, default skin.
I'm trying to play a 1:1 aspect ratio video from my media services account in Azure media player. Doing this using 800/500px width/height caused the video to extend well below the height of the modal window it is playing in. I fixed this issue by setting the height of the video to 500px and the width to auto (when non-fullscreen). This setting works for both 16:9 and 1:1 aspect ratio (it's not ideal, but it does work).
When I fullscreen the video, the width and height are set to 100%, and so half of the video is lost. I would like the video to play with height max and black letterboxing at the sides, as it does in WMP. If I could get the same effect when playing in non-fullscreen that would also be good. If I set the video height to anything other than 100% when the player is fullscreen it just moves the playbar up the screen rather than resizing the video. Anyone have any advice on how to get this working?
As a last resort I would also accept not being able to set the video to fullscreen, but I can't find documentation on how to do that either.
Issue here was a rogue css rule setting the height of all s to 100%
So, on my website there are going to be mulitple videos all with different content that has been submitted by users and uploaded to the site.
Some videos that users have uploaded have different frame widths and heights.
For example:
(Video 1) - Frame width: 1280.
(Video 2) - Frame width: 480. Frame height 360.
The problem is that when a video with a different frame height is used, the actual HTML5 video itself changes it's height. It get's smaller or larger, I do not want that, I want all videos to remain the same size regardless of the video frame height.
Like Youtubes, all of the videos are exactly the same width and height, I want it like thiers.
To give you guys more of an idea of what I mean, I've gave a link below to the html file:
https://mega.nz/#!oMpwDQ7a!r5wO1GfG0c5Gj5dd5xE8pk1Udl5GxoaQ37pDwLAgcXk
.
Note: I have tried almost everything, changed CSS code 1million times, tried 3rd party apps, nothing is giving me what I want.
Best regards, thanks.
In order to have all videos be the same size, you will need to either stretch the video (typically bad, don't do this) or add bars to the top/bottom or sides to show the original video dimensions. With html5 video, all you need to do to achieve this is apply a width and height to the video tag.
<style type="text/css">
video{width: 500px;height:300px;position:relative;margin-top:-20px;}
video:hover{cursor:pointer}
</style>
Try this in your source file, it will cause all your videos to be the same size, and will simply add bars to the files to make them all take up the same space (note how it adds to the top/bottom on one, and the sides on the other).
Even youtube does this if you video file is of a different aspect ratio (you'll notice black bars on those youtube videos, ex: https://www.youtube.com/watch?v=2Or1Ui7yM7Q this video was shot on a square monitor, and is not widescreen aspect).
I am creating a photo site - I uploaded a photo of myself which is actually incorrectly oriented (the image is rotated 90 degrees counter clockwise). I have uploaded this image from my iPhone, which apparently has the image stored this way on purpose.
On my site, the HTML page has rendered a JSON object that contains the URL to the photo as well as the image dimensions. I am using jQuery mobile - and onload of the page I put a link on the page, and when you click the photo it displays the photo as a popup. The popup renders an <img> tag with dimensions that are small enough to fit the image within the current viewport width/height. It calculates the dimensions using the JSON I previously mentioned, and the results from $(window).width() and $(window).height().
On desktop - the photo correctly displays in the wrong orientation (because that is how the photo is actually stored).
On iPad & iPhone - the photo is auto-rotated so the photo is correctly oriented, but the dimensions are all wrong so the photo is all stretched out and distorted.
I would like to know the following:
Is this a commonly known feature of browsers on iOS or other devices?
Is there a way to disable this functionality using CSS or Javascript?
Is there a way to detect that it happened and correct the dimensions of the <img> tag? I don't mind that the photo's orientation was corrected by the browser, I just want the dimensions to be proper.
EDITS
Making the Title more in the form of a question - Also reformulating the question to be more direct
MORE EDITS
Here is a JS Fiddle with an example: http://jsfiddle.net/5JKgn/
If you click the link on a desktop computer, the popup shows the image improperly oriented. If you click the link on an iPhone or iPad, the popup shows the image properly oriented, but the dimensions are wrong so the photo is stretched.
In the real scenario, the JSON is rendered by PHP code which can read the image and outputs the width height from what it gets using getimagesize()
OK I'll try to answer this one:
Yes that's on purpose iOS stores the display-orientation in the EXIF data (among things like resolution, shutter, GPS etc.) but saves the image data in device-orientation.
For more info on EXIF see Wikipedia.
Not that I know of.
Yes, you should be able to access the EXIF data and determine orientation and dimensions.
Nr. 3 needs a little more explanation:
You could use a library like this one to access the EXIF data from javascript (includes jQuery plugin).
The Orientation Tag is defined as: 0x0112 : "Orientation" and stored as a number.
Using that information you can determine the orientation:
Value | Orientation
------|----------------------
1 | horizontal (normal)
2 | flip horizontal
3 | rotate 180°*
4 | flip vertical
5 | transpose
6 | rotate 90°*
7 | transverse
8 | rotate 270°*
* rotation is counter clockwise
That should enable you to at least swap width / height for your <img> if need.
Please not that the EXIF data also includes the width and height so if they differ from what you think they should be that could also help to identify rotation issues.
To formalize my comments - perhaps you can just sidestep the issue:
If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.
Or, as the OP noted in response, just remove the EXIF tag, and browsers will no longer be able to use it for 'fixing' the orientation.
(p.s. Always remember to ask 'why' enough times to figure out what problem you're actually trying to solve :D)
You don't need to us Javascript to explicitly set the height/width of the image on load. Remove the part of your script that's inserting those inline height/width styles and just add the following to your stylesheet:
.ui-popup-container {
width: calc(100% - 40px); /* simulates a 20px margin */
}
.ui-popup-container img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
Here's an updated Fiddle
Use media queries for desktop browsers and set the css for the images to 100% height and auto width.
#media (min-width: 900px)
{
img {width:auto; height:100%;}
}
You may even consider using these variables instead of calculating them for the mobile site
I am trying to set up a HTML5 video player using video.js and Flat UI by DesignModo. I have the problem that I need to make the video player responsive, so the width needs to be 100%.
The problem is that then when this is set the height of the video is always the same as you can see in this fiddle. So what I need (I think) is a script which detects the aspect ratio as the aspect ratio will change. I found a script like that over here however it is designed for iframe videos like YouTube or Vimeo.
I attempted to modify the script by changing the value of $allVideos to $("video[class^='video-js']"), but it does not seem to have worked. Can anyone have a look at my Fiddle and try and tell me what's wrong and how to fix it?
By the way, I know that the links to the font files and image(s) are turning up 404, thats because at the moment the files are not hosted on my server, I have just been testing them locally.
Just remove the height: 100%; from .video-js .vjs-tech. And this take aspect ratio automatically from given width 100%.