After two more weeks of research we managed to come up with a solution by toggling between different types of controls based on the content that needs to be displayed. To display PowerPoint slideshows, we converted all slides to images and then looped through the collection. Here is a snippet of the code in case someone else needs a bit of guidance with a similar issue:
<body>
<form id="form1" runat="server">
<%-- Video DIV --%>
<div runat="server" id="VidDiv" class="fullscreen-bg">
</div>
<%-- IMAGE DIV --%>
<div runat="server" id="container">
<div runat="server" id="containers">
</div>
<%-- this is where the code gets dynamically created --%>
</div>
</form>
</body>
<script src="Scripts/jquery-3.1.1.js"></script>
<script id="CallMyFunction" type="text/javascript">
var index = 1;
document.getElementById("VidDiv").style.display = "none";
var ImageCount = 1;
autoSlide();
function autoSlide() {
var x = document.getElementsByClassName("Images");
var video_player = document.getElementsByClassName("fullscreen-bd__video");
var count;
var video;
var videoSource = new Array(), vids, i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
if (index > x.length) {
index = 1
}
x[index - 1].style.display = "block";
count = x.length;
if (ImageCount <= count) {
index++;
ImageCount = 1 + ImageCount;
setTimeout(autoSlide, 8000);
}
else {
//this is where we should switch from image div to video div
document.getElementById("container").style.display = "none";
document.getElementById("VidDiv").style.display = "block";
//create a counter to check the number of video tags
video = document.getElementsByTagName('video'), numVideos = video.length;
for (i = 0; i < numVideos; i++) {
videoSource[i] = video.item(i).src;
document.getElementById("myVideo" + i).style.display = "none";
}
var videoCount = 0;
if (videoCount <= numVideos -1) {
function videoPlay(videoNum) {
if (videoCount > 0)
{
document.getElementById("myVideo" + (videoCount - 1)).style.display = "none";
}
document.getElementById("myVideo" + videoCount).style.display = "block";
document.getElementById("myVideo" + videoCount).setAttribute("src", "" + videoSource[videoCount] + "");
document.getElementById("myVideo" + videoCount).load();
document.getElementById("myVideo" + videoCount).play();
onEndedVid = document.getElementById("myVideo" + videoCount);
var onEndedVid;
onEndedVid.onended = function () {
//at the end of the video, close full screen
myHandler();
};
videoCount = videoCount + 1;
}
function myHandler() {
if (videoCount == numVideos) {
//this is where we should switch from image div to video div
document.getElementById("container").style.display = "none";
document.getElementById("VidDiv").style.display = "none";
location.reload();
}
else {
videoPlay(videoCount);
}
}
myHandler();
}
else
{
///back to images
//refresh the page
location.reload();
}
}
}
Code behind:
// this will be a watcher that checks if is new content... if there is, delete the existing .wpl file and recreate the .wpl with new content links included
private void CreateNewPlayList(string folder)
{
try
{
System.Threading.Thread.Sleep(5000);
fileName = getDrive(folder) + @"\" + folder + "Playlist.wpl";
FileInfo fileInfo = new FileInfo(fileName);
String f = @"<?wpl version=""1.0""?>
<smil>
<head><meta name=""Generator"" content=""Microsoft Windows Media
Player -- 10.0.0.3646""/>
<author/>
<title> a title goes here </title>
</head>
<body>
<seq> ";
String ff = @"
</seq>
</body>
</smil>";
using (FileStream fs = fileInfo.Create())
{
Byte[] txt = new UTF8Encoding(true).GetBytes(f);
fs.Write(txt, 0, txt.Length);
////write paths and load only certain file types according to requirements into array
String[] extentions = { "*.mp4", "*.wmv", "*.JPG".ToLower(), "*.ppt", "*.png" };
List<string> files = new List<string>();
foreach (string filter in extentions)
{
files.AddRange(System.IO.Directory.GetFiles(getDrive(folder) + @"\", filter));
}
int filecount = files.Count;
string[] video_lists = new string[files.Count];
int counts = 0;
foreach (string file in files)
{
video_lists[counts] = file.ToString();
string PathfileName = Path.GetFileName(file);
Byte[] author;
//use the ppt to be able to go into the folder and add each slide as part of the playlist
if (Path.GetExtension(PathfileName) == ".ppt" || Path.GetExtension(PathfileName) == ".pptx")
{
//create a loop to loop through the folder that has the same name as ppt/pptx(PathFileName)
string pptDrive = getDrive(folder) + @"\" + Path.GetFileNameWithoutExtension(PathfileName) + @"\";
if (Directory.Exists(pptDrive))
{
string[] pptFilesFolder = Directory.GetFiles(pptDrive);
int counter = 1;
while (counter <= pptFilesFolder.Length)
{
foreach (string pptFile in pptFilesFolder)
{
string pptFileName = Path.GetFileName(pptFile);
string pptFileNameNoExt = Path.GetFileNameWithoutExtension(pptFile);
int i = pptFilesFolder.Length;
int ss = Convert.ToInt16(new String(pptFileNameNoExt.Where(Char.IsDigit).ToArray()));
if (ss <= i && ss == counter)
{
author = new UTF8Encoding(true).GetBytes(@"<media src=""" + pptDrive + @"\" + pptFileName + "\"/>");
fs.Write(author, 0, author.Length);
counter++;
}
}
}
}
else
{
//do something...
}
}
else
{
author = new UTF8Encoding(true).GetBytes(@"<media src=""" + getDrive(folder) + @"\" + PathfileName + "\"/>");
fs.Write(author, 0, author.Length);
}
counts = counts + 1;
}
Byte[] toptxt = new UTF8Encoding(true).GetBytes(ff);
fs.Write(toptxt, 0, toptxt.Length);
}
}
catch (IOException io)
{
//error handling....
return;
}
catch (Exception ex)
{
//error handling...
return;
}
}
The code can obviously be improved and optimized, but this is the base we used to get our app working. Thanks for all the advice and input!
