Html5 video 在三星智能电视应用程序上调整HTML5视频大小
我在尝试调整三星智能电视应用程序中HTML5视频元素的大小时遇到问题。我使用的是SDK 2.5。它在2011年和2012年的模拟器中运行良好，但当我在电视上测试它时，它被困在全屏上 我尝试过使用css和内联元素，但它们都不起作用 我的代码如下所示： 索引页：Html5 video 在三星智能电视应用程序上调整HTML5视频大小,html5-video,samsung-smart-tv,Html5 Video,Samsung Smart Tv,我在尝试调整三星智能电视应用程序中HTML5视频元素的大小时遇到问题。我使用的是SDK 2.5。它在2011年和2012年的模拟器中运行良好，但当我在电视上测试它时，它被困在全屏上 我尝试过使用css和内联元素，但它们都不起作用 我的代码如下所示： 索引页： Main.js，在onLoad函数中： $("#player").attr("src","VIDEO_SOURCE"); $("#player").css({ 'position': 'absolute', 'left':
$("#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();
尝试将维度设置为视频标记属性，而不是CSS样式，如示例所示：
<video src="movie.mp4" width="320" height="240">
Your browser does not support the video tag.
</video>
您的浏览器不支持视频标记。
- 自动播放
- 控制
- 高度
- 环路
- 预载
- src
- 宽度
我知道这是一篇老文章，但我有一些代码可以使用 别忘了导入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>
//等待DOM加载
$（窗口）。加载（函数（）
{
var$bodyElement=$（'body'）；
});
//等待视频加载以添加事件侦听器
$（文档）.ready（函数（）
{
});
//在这里初始化Dom脚本
this.initialiseDomainScripts=函数（）
{
AddDomReadyListeners（）；
return true；//为初始化返回true
}
this.initialiseDocReadyScript=函数（）
{
AddDocReadyListeners（）；
OnResize（）；
返回true；
}
this.AddDomReadyListeners=函数（）
{
//添加窗口侦听器，请参见何时调整窗口大小
$（窗口）。调整大小（OnResize）；
}
this.AddDocReadyListeners=函数（）
{
//将侦听器添加到视频以查看元数据何时加载
$（'video'）.bind（“loadeddata”，函数（\u VideoEvent）
{
加载的视频数据（视频事件）；
});
}
this.OnLoadedVideoData=函数（\u VideoEvent）
{
var loadedVideoElement=\u VideoEvent.target；
if（$（loadedVideoElement）.hasClass（'StretchtoFit'））
{
调整视频大小（加载的视频元素）；
}
}
this.OnResize=函数（）
{
//循环浏览所有标记为“弹性贴合”的视频
$（'.stretchofit'）。每个（函数（）
{
var CurrentChild=这个；
调整视频大小（CurrentChild）；
});
}
this.ResizeVideo=函数（\u VideoElement）
{
$VideoElement=$（\u VideoElement）；//缓存此文件的Jquery引用
变量iOriginalVideoHeight=\u VideoElement.videoHeight；
var iccurrentVideoHeight=$VideoElement.height（）；
var iVideoContainerHeight=$VideoElement.parent（）.height（）；
var iCurrentScale=iOriginalVideoHeight/iCurrentVideoHeight；
var iScaleY=（iVideoContainerHeight/iOriginalVideoHeight）*iCurrentScale；
//需要注意的重要事项：将原点设置为左上角（0%0%），否则视频位置会出错
$VideoElement.css({
“转换原点”：“0%0%”，
“转换”：“scaleY（“+iScaleY+”），
“-ms转换原点”：“0%0%”，/*IE 9*/
“-ms转换”：“scaleY（“+iScaleY+”），/*IE 9*/
“-moz转换源代码”：“0%0%”，/*Firefox*/
“-moz-transform”：“scaleY（“+iScaleY+”），/*Firefox*/
“-webkit转换源代码”：“0%0%”、/*Safari和Chrome*/
“-webkit转换”：“scaleY（“+iScaleY+”），/*Safari和Chrome*/
“-o-transform-origin”：“0%0%”，/*Opera*/
“-o-transform”：“scaleY（“+iScaleY+”）/*Opera*/
});
}
您的浏览器不支持视频标记。