在三星智能電視應用上調整HTML5視頻的大小

我在嘗試調整我的三星智能電視應用中的HTML5視頻元素的大小時遇到問題。我正在使用SDK 2.5。它在2011年和2012年的仿真器中工作正常，但是當我在電視上測試它時，它全屏顯示。在三星智能電視應用上調整HTML5視頻的大小

我試過使用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();

來源

2012-08-08 Petecoop

嘗試設置尺寸視頻標籤屬性，而不是CSS造型，例如：

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

有2.5 SDK支持的屬性：

自動播放
控制
高度
環
預緊
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

來源

2012-08-09 08:32:05

感謝您的回答，但我先試了一下，也沒有工作。我一直在使用三星的播放器，但遇到問題，播放mp4的 – Petecoop 2012-08-09 13:27:33

mp4在三星API播放器工作良好。嘗試玩三星的演示。 – 2012-08-10 22:58:56

嗯，我去使用三星API播放器。我遇到的問題是，當視頻緩衝時，屏幕在開始播放前閃爍黑色。我改變了視頻源，現在它工作正常，也許與比特率有關。 – Petecoop 2012-08-12 07:10:30

我知道這是一個老的文章，但我有一些代碼，您可以使用不要忘了進口的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-30 09:39:25 tonymce

在三星智能電視應用上調整HTML5視頻的大小

回答

相關問題