Question

我在尝试调整Samsung Smart TV应用中的HTML5视频元素时遇到了问题。我使用的是SDK 2.5。它在2011年和2012年的模拟器中运行良好，但是当我在电视上进行测试时，它会全屏停留。

我尝试过使用css和内联元素，但它们都没有用过。

我的代码如下所示：

索引页面： <video id="player"></video>

Main.js，在onLoad函数中：

$("#player").attr("src","VIDEO_SOURCE");
$("#player").css({
    'position': 'absolute',
    'left': '419px',
    'top': '394px',
    'width': '125px',
    'height': '100px',
});
var v = $("#player").get(0);
v.load();
v.play();

Answer 1

尝试将尺寸设置为视频标签属性而不是CSS样式，例如：

 <video src="movie.mp4" width="320" height="240">
 Your browser does not support the video tag.
 </video>

2.5 SDK支持的属性：

自动播放
控件
身高
loop
preload
SRC
宽度

查看三星有关此主题的文档： http://www.samsungdforum.com/upload_files/files/guide/data/html/html_2/reference/HTML%20Specification.html#HTML5%20and%20Samsung%20Smart%20TV%20SDK

视频更灵活但更复杂，为您提供三星的播放器API： http://www.samsungdforum.com/Guide/View/Developer_Documentation/Samsung_SmartTV_Developer_Documentation_2.5/API_Reference/JavaScript_APIs/Device_API/Player

Answer 2

我知道这是一个旧帖子，但我有一些你可以使用的代码别忘了导入jquery

<HTML>
<script>
//Wait for the DOM to load
$(window).load(function()
{
    var $bodyElement = $('body');

});


//Wait for the Videos to load To add Event listeners
$(document).ready(function()
{
});



//Initialise Dom Scripts here
this.InitialiseDomScripts = function()
{
    AddDomReadyListeners();
    return true; //return true for Initialisation
}

this.InitialiseDocReadyScripts = function()
{
    AddDocReadyListeners();
    OnResize();

    return true;
}

this.AddDomReadyListeners = function()
{
    //Add a window listener, see when the window is resized
    $(window).resize(OnResize);
}

this.AddDocReadyListeners = function()
{
    //Add a listeners to videos to see when the meta data has loaded
    $('video').bind("loadeddata",function(_VideoEvent)
    {
        OnLoadedVideoData(_VideoEvent);
    });
}

this.OnLoadedVideoData = function(_VideoEvent)
{
    var loadedVideoElement = _VideoEvent.target;
    if($(loadedVideoElement).hasClass('StretchtoFit'))
    {
        ResizeVideo(loadedVideoElement);
    }

}

this.OnResize = function()
{
    //Loop through all of the videos that are marked as stretch to fit
    $('.StretchtoFit').each(function()
    {
        var CurrentChild = this;
        ResizeVideo(CurrentChild);
    });
}

this.ResizeVideo = function(_VideoElement)
{
    $VideoElement = $(_VideoElement); //Cache Jquery reference of this
    var iOriginalVideoHeight =  _VideoElement.videoHeight;
    var iCurrentVideoHeight = $VideoElement.height();
    var iVideoContainerHeight = $VideoElement.parent().height();
    var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight;
    var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale;


    //Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray
     $VideoElement.css({
        "transform-origin": "0% 0%",
        "transform":"scaleY(" + iScaleY +")",
        "-ms-transform-origin" : "0% 0% ", /* IE 9 */
        "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */
        "-moz-transform-origin" : "0% 0%", /* Firefox */
        "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */
        "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */
        "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */
        "-o-transform-origin":"0% 0%", /* Opera */
        "-o-transform":"scaleY(" + iScaleY +")" /* Opera */
     }); 
}

</script>
<body>
<video class="StretchtoFit"  autoplay preload id="video"><source src="1.mp4" type="video/mp4" />Your browser does not support the video tag.</video>
</body>
</html>

在Samsung Smart TV App上调整HTML5视频大小

2 个答案: