I have a 10 second video clip, and a full video that the video clip is from on my site. the 10second video is set to (autoplay, preload=auto, and muted), and the full video is set to (preload=none) and is set to only load when clicked. the videos are both .mp4.
I publish my site to IIS on my computer, and I go to localhost, and the site will load fine. The 10second video loads fine on my video carousel, but when I click it to go to the dedicated page about the video the 10second video will either load like it should, or either it will take a few extra seconds to load, or doesn't load at all??
The full video will load perfect every time even if the 10second video doesn't load I can still click the space where it should be (I have a div that's clicked that activates the full video not the click of the clip), and the full video will open, and start playing fine?
I cannot figure out what is causing this issue since the video will load fine on the main page even if 5 other vidoes are loading on the carousel at the same time, yet when its on its own page it just doesn't load almost every time..? I try clearing cache, and reloading the page, but still 90% of the time it just doesn't load?
so can someone tell me what could be causing a 10second video 2.2mb to not load when preload is on, but a video that's 90.2mb will load when activated instantly even though preload is off?? even if I reload the page, and click to load the full video right away it will load almost instantly?? I literally have the same code on the main page to get the video clip and play it which works every time!
10second clip: I have divs around these video clips that have an id so the div can be loaded on other pages which loads the videos.
<video preload="auto" src="@Url.Content("~/Content/Video/")@item.clip" autoplay loop="" muted style="width:100%;"></video>
full video:
<video id="videoClick1" controlsList="nodownload" src="@Url.Content("~/Content/Video/")@item.selectFile" preload="none" controls style="width:100%;"></video>
here is where the videos get loaded:
<div id="fullVideoClick">
<div id="video2">
</div>
<div id="video1">
</div>
</div>
<script>
$("#video1").load("/VideoCarousels/index #profileVideo1");
$("#video2").load("/VideoCarousels/index #carouselVideo1");
</script>
and on the main page:
<div id="video1">
</div>
<script>
$("#video1").load("/VideoCarousels/index #carouselVideo1");
</script>
the only thing I can think of is the preload for the video clip isn't activating sometimes for some reason since it works perfect about 5% of the time, and 5% of the time it takes longer than usual, but still loads, and the other 90% of the time it just never loads, yet on the main page it loads perfect 95% of the time, and the other 5% of the times it will load eventually, but takes longer then normal.
--edit--
I have set my 5 video carousel to play the same video clip on each slide, and it seems to load the video 3 out of 5 slides when I reload the page after I clear cache, but when I reload the page the second time it loads them all fine, but still on the dedicated pages it just doesn't load the clip. I also added in $(document).ready(function(){ ... }); which at first loaded the clip, which made me hopeful that that would be the answer, but after refreshing the page again the clip didn't load anymore even after clearing cache it was random if it was going to load or not.
--edit2-- found the weirdest thing! I inspected elements, and deleted the full video from poping up because behind it is the video clip so I was able to see the video controls for the video clip, and whats weird is the video clip is actually loaded fine, but the weirdest thing is that clicking play does nothing?? I click play, and then I have to click a few seconds into the video, and then it starts playing??? anyone have ANY idea why this is happening??
