Video
Video copied to clipboard
Can't seem to get second video to start
I'm using the example code, except I've added a parameter for the video file name. My Navmenu contains a list of file names to select from. The first file starts up without issue, but if I select a second, it never starts. I can restart the code, and select any video file name from my list, and it always starts up, so I know it's able to find all the files, but anytime I select a subsequent video, it never starts. When I include a breakpoint, I can see the file name:
After selecting the second video, again, I can see the new video file name at the breakpoint, but it never get loaded and played.
Keep in mind, I can always play the second video first without issue, but never another behind it.
Is there a way to force the next video to load?
I'm facing the same issue but I didn't add a parameter for video file name and I change the source according to my ViewModel changes such as this:
<BlazoredVideo>
<source src="@ViewModel.VideoSource" type="video/mp4" />
</BlazoredVideo>
I can verify that the source gets updated successfully by Blazor, but the new video is not loaded.
I think this is not an issue for Blazored.Video
but a pitfall in HTML, have a look at this StackOverflow question. Basically, a call to HTML's video tag Load method is required after the source tag is updated. As a suggestion, it would be real handy if Blazored.Video
could expose the Load
method too! @chrissainty
Hi - you can force a reload by using a @key
like this:
<BlazoredVideo @key=videos[selectedVideo]>
<source src=@videos[selectedVideo] type="video/mp4" />
</BlazoredVideo>
<button @onclick=NextVideo>Next Video</button>
In this code, I have an array of videos and the current index is held in selectedVideo (int)
I make the @key
the same as the video URL, so when the URL changes, Blazor will recreate the video
element.
The method NextVideo
just increments selectedVideo
and wraps back round to zero at the end of the video list.
Hi - you can force a reload by using a
@key
like this:
I can make the first video on the page render and play. It works well. At first I too had the problem of subsequent videos failing to display. I discovered that they had not been encoded with H.264 Codec. Resampling the file solved the problem for those.
This worked for me to load a video dynamically:
<BlazoredVideo @key="@ProfileVideoUrl" class="w-100"
style="max-width:800px;"
controls="controls">
<source src="@ProfileVideoUrl" type="video/mp4" />
</BlazoredVideo>