在三星智能电视应用程序上调整 HTML5 视频大小答案

【问题标题】：Resize HTML5 Video on a Samsung Smart TV App在三星智能电视应用程序上调整 HTML5 视频大小
【发布时间】：2012-08-08 14:59:21
【问题描述】：

我在尝试调整三星智能电视应用中的 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();

【问题讨论】：

标签： html5-video samsung-smart-tv

【解决方案1】：

尝试将尺寸设置为视频标签属性而不是 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

【讨论】：

感谢您的回答，但我先尝试了这个，它也没有工作。我一直在使用三星的播放器，但播放 mp4 时遇到问题
mp4 在三星 API 播放器上运行良好。尝试玩三星的演示。
嗯，我可以使用三星 API 播放器。我遇到的问题是，当视频被缓冲时，屏幕在开始播放之前就黑屏了。我更改了视频源，现在可以正常使用了，可能与比特率有关。
是的，屏幕闪烁的问题是由不同的视频fps引起的。因此，当您制作 VOD 应用程序时，请尝试对所有视频使用相同的视频编码设置。

【解决方案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>

【讨论】：