必须将视频从 JSON 对象加载到 div 中，这可以通过淘汰赛来完成吗？
Posted
技术标签:
【中文标题】必须将视频从 JSON 对象加载到 div 中，这可以通过淘汰赛来完成吗？【英文标题】：Have to load video into div from JSON object, can this be done with knockout? 【发布时间】：2019-12-11 23:38:52 【问题描述】：在此任务中，他们希望我在单击缩略图后将此 JSON 对象中的视频加载到相应的播放器中。如果可能的话，我对如何做到这一点并没有真正的线索，而且我已经研究了过去一个小时，但我一生都找不到任何东西。我的代码如下
var json =
"available": true,
"screens": [
"id": "s01",
"type": "Selector",
"config":
"views": [
"id": "sintel",
"type": "selectorItem",
"thumbnail": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/img/thumb_sintel.png",
"title": "Sintel",
"description": "Small video. html5, native controls, start poster. Bottom, right social. Video + grid",
"info": "00:51"
,
"id": "bbb",
"type": "selectorItem",
"thumbnail": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/img/thumb_bbb.png",
"title": "Big Buck Bunny",
"description": "Large video. HTML5, custom controls, social hover. Video + replay",
"info": "00:33"
,
"id": "walle",
"type": "selectorItem",
"thumbnail": "http://test-cdn.selectablemedia.com/test/a/walle/assets/img/thumb_walle.png",
"title": "WALL-E",
"description": "Small video. Youtube, custom controls. Left social. Video + carousel.",
"info": "02:30"
]
,
"id": "sintel",
"type": "BrandWrapper",
"config":
"views": [
"id": "sintelBranding",
"type": "fullBranding",
"url": "sintel_single.png"
,
"id": "sintelPlayer",
"type": "smPlayerIframe",
"files": [
"type": "mp4",
"codecs": "h264,aac",
"url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.mp4"
,
"type": "mp4",
"codecs": "avc1.42E01E,mp4a.40.2",
"url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.mp4"
,
"type": "ogv",
"codecs": "theora,vorbis",
"url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.ogv"
,
"type": "flv",
"codecs": "h264,aac",
"url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.flv"
]
,
"id": "sintelLeftClickArea",
"type": "brandClickArea",
"area": "leftTower",
"clickParams":
"value": "https://durian.blender.org/"
,
"id": "sintelHeaderClickArea",
"type": "brandClickArea",
"area": "header",
"clickParams":
"value": "https://durian.blender.org/about/"
,
"id": "sintelFooterClickArea",
"type": "brandClickArea",
"area": "footer",
"clickParams":
"value": "https://durian.blender.org/gallery/"
]
,
"id": "bbb",
"type": "BrandWrapper",
"config":
"views": [
"id": "bbbBrandingHeader",
"type": "header",
"url": "bbb_header.png"
,
"id": "bbbBrandingLeft",
"type": "leftTower",
"url": "bbb_tower_left.png"
,
"id": "bbbBrandingRight",
"type": "rightTower",
"url": "bbb_tower_right.png"
,
"id": "bbbBrandingFooter",
"type": "footer",
"url": "bbb_footer.png"
,
"id": "bbbPlayer",
"type": "smPlayerIframe",
"files": [
"type": "mp4",
"codecs": "h264,aac",
"url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.mp4"
,
"type": "mp4",
"codecs": "avc1.42E01E,mp4a.40.2",
"url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.mp4"
,
"type": "ogv",
"codecs": "theora,vorbis",
"url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.ogv"
,
"type": "flv",
"codecs": "h264,aac",
"url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.flv"
]
,
"id": "bbbLeftClickArea",
"type": "brandClickArea",
"area": "leftTower",
"clickParams":
"value": "https://peach.blender.org/"
,
"id": "bbbHeaderClickArea",
"type": "brandClickArea",
"area": "header",
"clickParams":
"value": "https://peach.blender.org/"
,
"id": "bbbRightClickArea",
"type": "brandClickArea",
"area": "rightTower",
"clickParams":
"value": "https://peach.blender.org/"
,
"id": "bbbFooterClickArea",
"type": "brandClickArea",
"area": "footer",
"clickParams":
"value": "https://peach.blender.org/"
]
,
"id": "walle",
"type": "BrandWrapper",
"config":
"assetPath": "http://test-cdn.selectablemedia.com/test/a/walle/assets/img/",
"sizeTemplate": "smallVideo",
"views": [
"id": "walleBranding",
"type": "fullBranding",
"url": "walle_single.png"
,
"id": "wallePlayer",
"type": "smPlayerIframe",
"files": [
"type": "mp4",
"codecs": "h264,aac",
"url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.mp4"
,
"type": "mp4",
"codecs": "avc1.42E01E,mp4a.40.2",
"url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.mp4"
,
"type": "ogv",
"codecs": "theora,vorbis",
"url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.ogv"
,
"type": "flv",
"codecs": "h264,aac",
"url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.flv"
]
,
"id": "wallLeftClickArea",
"type": "brandClickArea",
"area": "leftTower",
"clickParams":
"value": "http://movies.disney.com/wall-e/"
,
"id": "walleHeaderClickArea",
"type": "brandClickArea",
"area": "header",
"clickParams":
"value": "http://movies.disney.com/wall-e/"
,
"id": "walleRightClickArea",
"type": "brandClickArea",
"area": "rightTower",
"clickParams":
"value": "http://movies.disney.com/wall-e/"
,
"id": "walleFooterClickArea",
"type": "brandClickArea",
"area": "footer",
"clickParams":
"value": "http://movies.disney.com/wall-e/"
]
]
HTML
<div data-bind="foreach: screens">
<div class="container" data-bind="with: config">
<div class="row" data-bind="foreach: views">
<div class="col-md-6">
<div class="card">
<!--This line should load the video-->
<img class="card-img-top" data-bind="attr: src: thumbnail ">
<div class="card-body">
<h5 class="card-title" data-bind="text:title"> </h5>
<p class="card-text" data-bind="text:info"> </p>
</div><!-- card content -->
</div>
</div>
</div>
</div>
</div>
任何事情都会非常感激。
【问题讨论】：
【参考方案1】：基于演示here，您可以使用<video>标签：
<!-- ko if: type() === 'smPlayerIframe' -->
<video controls>
<!-- ko foreach: files -->
<source data-bind="attr: src: url, type: 'video/' + type() " />
<!-- /ko -->
Your browser does not support the video tag.
</video>
<!-- /ko -->
【讨论】：
以上是关于必须将视频从 JSON 对象加载到 div 中，这可以通过淘汰赛来完成吗？的主要内容，如果未能解决你的问题，请参考以下文章