3

我在尝试调整三星智能电视应用程序中 HTML5 视频元素的大小时遇到​​问题。我正在使用 SDK 2.5。它在 2011 和 2012 模拟器中运行良好，但是当我在电视上测试它时，它卡在全屏状态。

我试过使用 css 和 inline 元素，但它们都没有工作。

我的代码如下所示：

索引页： <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();
4

2 回答 2

3

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

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

2.5 SDK 支持的属性有：

  • 自动播放
  • 控制
  • 高度
  • 环形
  • 预载
  • 源代码
  • 宽度

查看有关此主题的三星文档：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

于 2012-08-09T08:32:05.473 回答
0

我知道这是一篇旧帖子，但我有一些代码可以使用，不要忘记导入 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>
于 2013-08-30T09:39:25.533 回答