Setup Jw player dynamically for Json array data
Hi Team,
we are facing issue in playing the videos using jwplayer dynamically when the videourl is bound from the json data. we are creating the html source through javascript and our requirement is that the jwplayer should play the videos dynamically. Could you please let us know how to setup the jwplayer for this scenario.
we have used jwplayer to play a single video by calling a separate setup function and creating the container . Now we need to dynamically bind the video Url to the each item in aspx page using javascript.
Please find below code reference which we have tried out.
<script type="text/javascript">
$(document).ready(function () {
BindHistoryItems();
});
//generate html source
function OnSuccessDetails(response) {
var data = response.GetOurHistoryList;
//took one decade year
decadeHtmlStr = "<div class='decade navigatorContent' data-decade='" + decYear + "'><div class='decadeHead'><span>" + DecYearTxt + "</span><p>" + decYear + "s</p></div>";
//to create row tag
rowHtmlStr = "<div class='row'>";
$.each(data, function (key, element) {
var imageVideostr = '';
if (element['YearDecade'] == decYear) {
if (element['AlignContent'] == 'lCol') {
leftcontent = "<div class='col-md-6 col-md-pull-6 " + element['AlignContent'] + "'>" +
"<div class='content'> <ul>" +
"<li data-year='" + element['YearContent'] + "' >" +
"<span class='year'>" + element['YearContent'] + " </span>";
if (element['ImageOrVideo'] == 'image') {
imageVideostr = "<img alt='' src='" + element['ImageUrlContent'] + "' />";
} else if (element['ImageOrVideo'] == 'video') {
imageVideostr = "<div class='videoThumbPanel only-for-desktop'>" +
"<img alt='' src='" + element['ImageUrlContent'] + "' />" +
"<div class='videoInfo'>" +
"<div id='divjwSubSectionVideo_" + element['YearContent'] + "' href='" + element['VideoURL'] + "' class='mainVideo1 youtube1 cboxElement1' ' >" + //onclick='SetContainerValue(this);
"<a href='javascript:loadVideo('" + element['VideoURL'] + "','" + element['ImageUrlContent'] + "')' class='play'> </a> </div>" +
"<h4>" + element['VideoTitle'] + "</h4>" +
"<hr class='short' />" +
"<div id='divjwSubSectionVideo_" + element['YearContent'] + "' href='" + element['VideoURL'] + "' class='mainVideo1 youtube1 cboxElement1' '>" + // onclick='SetContainerValue(this);
"<a href='javascript:loadVideo('" + element['VideoURL'] + "','" + element['ImageUrlContent'] + "')' title='#' class='btnLink blue'>Watch Video</a> </div>" +
"</div> </div>";
}
debugger;
leftcontent += imageVideostr + "<p>" + element['ContentText'] + "</p>" +
"</li></ul></div></div>";
}
}
});
rowHtmlStr += "</div>";
htmlstring = decadeHtmlStr + rowHtmlStr + "</div>";
//decade navigator tag end
$("#divbeginning").before(htmlstring);
}
}
</script>
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
image: "/uploads/myPoster.jpg",
file: "/uploads/myVideo.mp4",
title: "My Cool Trailer"
});
</script>
<script>
function loadVideo(myFile, myImage) {
debugger;
jwplayer().load([{
file: myFile,
image: myImage
}]);
jwplayer().play();
};
</script>
<section id="history">
<div class="container">
<div id="divhistoryContainer" class="historyContainer">
</div>
</div>
</section>
sample JSON Data:
Object1:
AlignContent: "lCol"
ContentText: "PepsiCo will introduce Lay's brand potato chips in 20 markets throughout the world.<br>"
DecadeDescriptionText: "1991-1999"
ImageOrVideo: "video"
ImageUrlContent: "https://localhost/images/album/default-album/our-history-1990-4.jpg?sfvrsn=0"
VideoTitle: "Be Like Mike"
VideoURL: "https://youtu.be/S_sqDaD8CZ0"
YearContent: "1995"
YearDecade: "1990"
VideoURL might come from different sources like
"https://youtu.be/S_sqDaD8CZ0"
/videos/album/OurHistroy/be_like_mike.mp4?sfvrsn=2http://pepsicomultimedia.s3.amazonaws.com/fd/390ae009b611e5933c2d82813d6d0a/PepsiCo-Sustainable-Fleet-b-roll_Update.mov
