I'm working on a website with a HTML5 video tag. The video doesn't play on the website. But if I test it somewhere else, it plays without a problem.
http://carflow-staging.houston-1.hybridmedia.be/
My code is here:
<video class="video-splash__video" width="720" height="405" autoplay="" poster="http://carflow-staging.houston-1.hybridmedia.be/wp-content/themes/framework_wp/img/videoCarflowBackground.png">
<source src="http://carflow-staging.houston-1.hybridmedia.be/wp-content/themes/framework_wp/video/videoCarflowBackground.mp4" type="video/mp4">
<source src="http://carflow-staging.houston-1.hybridmedia.be/wp-content/themes/framework_wp/video/videoCarflowBackground.ogg" type="video/ogg">
<source src="http://carflow-staging.houston-1.hybridmedia.be/wp-content/themes/framework_wp/video/videoCarflowBackground.webm" type="video/webm">
Your browser does not support the video tag or the file format of this video.
</video>
What could be the issue?
Related
How to get those audio and video links to place in html code.when I share file to other devices and open it from there, why the image is not displaying in html and same goes with audio also.
exemple:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
its about absolute and relative paths...just see this link https://www.w3schools.com/html/html_filepaths.asp
Just wondering if anyone can tell me hy this is happening. When I play the video I can hear the audio but the video doesn't show. Heres my code, im a beginner
<video id = "videoplayer" width ="480" height = "270" poster = "../images/video.jpg" controls>
<source src = "../media/overwatch.mp4">
<video>
Try to use this default snippet - I think you missed the type of the video and check the src!
For more info read this.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I'm having a problem with the HTML5 video player, doesn't show the video, in a html file I have:
<video>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
Video tag not supported.
<video>
I even tried without the codec atributte in chrome I gets nothing, only the black square of the reproductor
the file video.mp4 is inside the same folder of the html, it doesn't even show a preview, nothing!
It should work with HTML5 video tag perfectly. I've put an example for your reference.
<video controls="" autoplay name="media">
<source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;codecs="avc1.42E01E, mp4a.40.2"">
</video>
This should work perfectly:
<video width="300" height="200" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I have video in .mp4 format. and I want show that in my html page, For that I use following tag
<video controls="controls" class="video-ctrl">
<source src="~/Content/Vedio/Care.mp4" type="video/mp4" />
</video>
This is worked in firefox, but not worked in chrome.
You need webm file to play video on webpage.
Example code below:
<video controls="controls" class="video-ctrl">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
<source src="http://techslides.com/demos/sample-videos/small.webm " type="video/webm" controls>
</video>
And Jsfiddle example
I have the different video files in the HTML <video> tag like so :
<video autoplay="" id="video" preload="auto" style="display: inline-block;">
<source src="../register.mp4" type="video/mp4">
<source src="../register.webm" type="video/webm">
<source src="../register.ogv" type="video/ogg">
</video>
But for some reason, in chrome it doesn't work. It only works if I get rid of the MP4 source, but then it doesn't work in IE... not sure what's going on here or the best way to approach this.
I have already gotten passed the step of creating video files for all browsers as suggested in this question, but it has not solved my issue.
The order in which you list the sources matters. In Chrome, once the .MP4 video fails to load, the other sources don't even bother trying to load, so just by putting the .MP4 source as the last source element it fixed everything.
<video autoplay="" id="video" preload="auto" style="display: inline-block;">
<source src="../register.webm" type="video/webm">
<source src="../register.ogv" type="video/ogg">
<source src="../register.mp4" type="video/mp4">
</video>