tvOS:<grid> 锁定标题始终可见(不仅在突出显示时)
tvOS: <grid> with lockup titles always visible (not just on highlight)
我正在使用适用于 tvOS 的 catalogTemplate。在 relatedContent 区域(由网格填充)中,我需要锁定以始终显示视频标题。目前,它仅在项目突出显示时显示。有什么办法可以解决这个问题吗?
这是我的 TVML。 (后台数据由Mustache.js渲染)
<?xml version="1.0" encoding="UTF-8" ?>
<document>
<catalogTemplate theme="dark">
<banner>
<title style="color: rgb(255, 255, 255); tv-align: left; font-size: 40; padding: 50; font-weight: bold;">Categories</title>
</banner>
<list>
{{#data.categories}}
<section>
<listItemLockup>
<title style="font-size: 30;">{{category}}</title>
<relatedContent>
<grid>
<header>
<title style="font-weight: bold;">{{category}}</title>
</header>
<section>
{{#videos}}
<lockup videoURL="{{video_url}}">
<img src="{{thumbnail_url}}" width="300" height="169" />
<title>{{title}}</title>
</lockup>
{{/videos}}
</section>
</grid>
</relatedContent>
</listItemLockup>
</section>
{{/data.categories}}
</list>
</catalogTemplate>
</document>
虽然不理想,但我能够通过使用而不是显示视频标题来实现这一点。
我遇到了和你一样的问题。我通过将 videourl 替换为 onselect 来解决它。这是示例:
<lockup onselect="playMedia('path to video', 'video')">
<img src="path to image" width="182" height="274"/>
<title>Movie 1</title>
</lockup>
找到了 here
playMedia()函数在.js文件中,代码如下
function playMedia(extension, mediaType) {
var videourl = baseURL + extension;
var singleVideo = new MediaItem(mediaType, videourl);
var videoList = new Playlist();
videoList.push(singleVideo);
var myPlayer = new Player();
myPlayer.playlist = videoList;
myPlayer.play();
}
我认为设置 tv-text-highlight-style
样式可以帮助您解决问题:
<title style="tv-text-highlight-style: marquee-on-highlight">{{title}}</title>
可以找到其他选项和样式here
我正在使用适用于 tvOS 的 catalogTemplate。在 relatedContent 区域(由网格填充)中,我需要锁定以始终显示视频标题。目前,它仅在项目突出显示时显示。有什么办法可以解决这个问题吗?
这是我的 TVML。 (后台数据由Mustache.js渲染)
<?xml version="1.0" encoding="UTF-8" ?>
<document>
<catalogTemplate theme="dark">
<banner>
<title style="color: rgb(255, 255, 255); tv-align: left; font-size: 40; padding: 50; font-weight: bold;">Categories</title>
</banner>
<list>
{{#data.categories}}
<section>
<listItemLockup>
<title style="font-size: 30;">{{category}}</title>
<relatedContent>
<grid>
<header>
<title style="font-weight: bold;">{{category}}</title>
</header>
<section>
{{#videos}}
<lockup videoURL="{{video_url}}">
<img src="{{thumbnail_url}}" width="300" height="169" />
<title>{{title}}</title>
</lockup>
{{/videos}}
</section>
</grid>
</relatedContent>
</listItemLockup>
</section>
{{/data.categories}}
</list>
</catalogTemplate>
</document>
虽然不理想,但我能够通过使用而不是显示视频标题来实现这一点。
我遇到了和你一样的问题。我通过将 videourl 替换为 onselect 来解决它。这是示例:
<lockup onselect="playMedia('path to video', 'video')">
<img src="path to image" width="182" height="274"/>
<title>Movie 1</title>
</lockup>
找到了 here
playMedia()函数在.js文件中,代码如下
function playMedia(extension, mediaType) {
var videourl = baseURL + extension;
var singleVideo = new MediaItem(mediaType, videourl);
var videoList = new Playlist();
videoList.push(singleVideo);
var myPlayer = new Player();
myPlayer.playlist = videoList;
myPlayer.play();
}
我认为设置 tv-text-highlight-style
样式可以帮助您解决问题:
<title style="tv-text-highlight-style: marquee-on-highlight">{{title}}</title>
可以找到其他选项和样式here