How to fix error 412 (with prerequisite) HTML5 error

Question

I am using the HTML5 tag inside FlexSlider. Sometimes the video stops working. After many searches, I got this error.

GET http://studiobooth.local/app/videos/0062mParticle12151601.mp4 412 (Precondition Failed) 

Here is my HTML5 tag code:

 <video preload="none" src="http://studiobooth.local/app/videos/2.mp4" poster="http://studiobooth.local/app/videos/thumbs/2.jpg" controls="" loop="" style="max-width:100%;height:100%;"><source src="http://studiobooth.local/app/videos/2.mp4" type="video/mp4">Your browser does not support the video tag.</video> 

Please help me fix this.

thanks

Answer 1

I have a workaround that helped me get it to work. Here is my code where I add milliseconds to the source URL of the file and reload the same video file if any error occurs.

 media.addEventListener('error', function (e) { var date = new Date(); var milliSecs = date.getMilliseconds(); var curr_src = $(media[0]).attr('src'); var curr_src_arr = curr_src.split("?"); var new_src = curr_src_arr[0]+"?t="+milliSecs; $(media[0]).attr('src',new_src); $(media[0]).find('source').attr('src',new_src); media[0].load(); //media[0].play(); /* Here we can not trigger play video/audio without user interaction. */ }, false); 

https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-W2WW1