Hi all,
I am working with D365 for Retails and I have a big issue. Can you help me to do it?
<div style="width: 50%;min-width:600px; float: left;">
<video autoplay loop style="height:100%;width:100%;object-fit:cover" data-bind="html: Urlvideo"></video>
</div>
And add a parameter “UrlVideo” in DualDisplayCustomControl.ts
this.UrlVideo = "<source src=" + '"' + "">commondatastorage.googleapis.com/.../ForBiggerEscapes.mp4" + '"' + " type=" + '"' + "video/mp4" + '"' + ">";
- Issue: So it was doing with one video but it not work with list video. I will make it work in html with JS and Jquery:
<!DOCTYPE html>
<html lang="en" xmlns="">www.w3.org/.../xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="">ajax.googleapis.com/.../script>
</head>
<body>
<!-- Note: The element ID is different from the ID generated by the POS extensibility framework. This 'template' ID is not used by the POS extensibility framework. -->
<div>
<div style="height:100%;width:100%;min-height:960px">
<div style="width: 50%;min-width:600px;min-height:960px;">
<video id="videoarea" autoplay loop style="height:100%;width:100%;object-fit:cover" src="" >
</video>
</div>
<div style="width: 50%;min-width:600px; float: right;">
<div class="height100Percent width100Percent">
<div class="height500 width100Percent no-shrink col marginBottom20" style="height:65%;min-height:650px">
<div class="col grow marginBottom48">
<div id="dualDisplayDataListSample" data-bind="msPosDataList: cartLinesDataList">
</div>
</div>
</div>
<div class="marginBottom20" style="background-color:lightgray;color:black;height:35%;min-height:250px;">
<h3 class="marginLeft8" data-bind="text: cartTotalAmountLabel" style="font-weight:bold">Total Amount:</h3>
<h3 class="marginLeft8" data-bind="text: cartTotalAmount"></h3>
<h3 class="marginLeft8" data-bind="text: customerNameLabel" style="font-weight:bold">Customer Name:</h3>
<h3 class="marginLeft8" data-bind="text: customerName"></h3>
<h3 class="marginLeft8" data-bind="text: customerAccountNumberLabel" style="font-weight:bold">Customer Account Number:</h3>
<h3 class="marginLeft8" data-bind="text: customerAccountNumber"></h3>
<h3 class="marginLeft8" data-bind="text: isLoggedOn() ? 'logged in' : 'logged out'"></h3>
<h3 class="marginLeft8" data-bind="text: employeeNameLabel" style="font-weight:bold">Employee Name:</h3>
<h3 class="marginLeft8" data-bind="text: employeeName"></h3>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
var $videos = ["http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"];
var $video = $("#videoarea");
var current = 0;
var max = 1;
function playVideo(video) {
current = video;
if (current == undefined) {
return false;
}
$video.attr({
"src": current,
"autoplay": "autoplay"
})
}
$video.attr({
"src": $videos[current],
"autoplay": "autoplay"
})
$video.on('ended', function () {
if (current == max) {
playVideo($videos[0]);
} else {
playVideo($videos[current + 1]);
}
});
function elIndex(parent, el) {
for (var i = 0; i < parent.length; i += 1) {
if (parent[i] === el) {
return i;
}
}
return null;
}
})
</script>
</body>
</html>
But I make it in DualDisplayCustomControl.html, It didn’t work.
So I want to ask how to make it work?
