Audio,vedio and imagine insertion in html - html

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

Related

Video doesn't play on site but it does somewhere else

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?

dynamic image background of html5 video

I am using video tag of HTML5. But before playing the video it shows the very first second of the video as the image; however, that image is solid black for my case; so I would like to know if I can have the default image (before hitting the play button) from somewhere of the middle of the video without using a static poster for all videos. I like to have images which will be a part of that video, I mean dynamic image as a background.
Any suggestions will help me a lot..!!
You need to generate thumbnails for your videos and use the thumbnail images using the poster attribute of the HTML5 video Tag.
<video width="320" height="240" poster="/images/w3html5.gif" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
You can use ffmpeg to generate thumbnails at any timeline from your videos.
You can Use this poster tag
<video width="320" height="240" poster="/images/w3html5.gif" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
To create your own image output :)
Well Keep it Up hope i Answered you As you Want.
All the Best. :)

video not loading in html5

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>

HTML5 video tag always gives Invalid source

Here is my code:
<video width="400" controls>
<source src="d:/lscweb/Presentations/2015-04-07 Ampersand.mp4" type="video/mp4">
</video>
But when I load up the page I get "Aborted" in the video player. If I do this:
<video width="400" controls>
<source src="d:/lscweb/Presentations/2015-04-07 Ampersand.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I get "Invalid source". I assume it's trying to look up the mov_bbb.ogg file which doesn't exist. But I want it to play the first one. It's mp4. Why won't it play?
You can't use link references to absolute windows os paths.
I suggest you move the video to the same folder as your html document and just do src="video.mp4" to avoid needing to use complex relative paths.

how to change a preview for html5 video?

how to change a preview for html5 video?
I need to show custom image, when user clicks on it video is playing.
<video controls="controls">
<source src="1.webm" type="video/webm">
<source src="1.mp4" type="video/mp4">
</video>
add poster attribut to video tag...
<video controls="controls" poster="url_to_img.jpg">
<source src="1.webm" type="video/webm">
<source src="1.mp4" type="video/mp4">
</video>
to set the preview of the HTML5 video you must know about poster attribute in video tag.
So it should look something like this
<video width=blah height=blah poster=blah >