I have a little problem. I am using video in mp4 as a background(starts at the beginning). I added a audio file that start playing at beginning too and when video is finished audio stops.
<video poster="" id="bgvid" autoplay>
<source src="video/background.mp4" type="video/webm">
<source src="video/background.mp4" type="video/mp4">
</video>
<audio autoplay id="backgroundsound" preload="metadata" loop>
<source src="audio/nuages-dreams.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
HTML5 video tag also add an attribute loop
<video id="bgvid" controls loop>
...
</video>
catching event pause of the video to restart audio :
if($("#bgvid").pause()){
$("#backgroundsound").play();
}
But why are you using audio video separately???
2 files medias to load at the start take mutch resources, you need to integrated the audio with video playing in a timeline you can also stopping display video image and play audio with a loop, with only one media file.
Related
All is in the title. When i access a page with a video tag, autoplay works fine.But when i reload the page, the video dont start.
What can i do to auto start the video ?
<video autoplay loop poster="the_poster.jpg" id="bgvid">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
i try to add a ?ts=timestamp.
i try also to start the video with JS but i get a "promise error"
I've had same issue here and it solved by adding muted attribute to video tag.
For Google Chrome, according to this update note, autoplay with sound needs some conditions. However, Muted autoplay is always allowed.
I am using html 5 video tag in my ionic project where i has to open a video and play it. Here play, pause and controls are working properly. My requirement is how to open a video file in full screen automatically(i.e default). Here is my code
<video autoplay loop controls>
<source src="{{videoUrl}}" type="video/mp4">
</video>
<video width="100%" height="100%" autoplay>
<source src="videoUrl" type="video/mp4">
</video>
In my website I have audio and I use the audio tag and controls and all that but the thing is when I try to play audio on my iphone (im using chrome), it doesn't play and it just says the length of the audio is 0:00... The audio file is 40megabytes so idk if that may be an issue...
Here is my code:
<audio controls>
<source src="audio/example4-17.m4a" type="audio/mpeg">
<source src="audio/example-4-17.mp3" type="audio/mpeg">
</audio>
I've stumbled upon this problem, while coding my project.
I have this html that plays a video:
<video id="video" autoplay="autoplay">
<source src="/videos/sample.mp4" type="video/mp4"></source>
</video>
Unfortuanately it is not starting the video.
However if i set the source of the video to be taken from the web (e.x.) http://techslides.com/demos/sample-videos/small.mp4
It plays the video correctly. Does anybody know what could be a trouble in here.
Try this
<video width="720" controls autoplay loop>
<source src="sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
I have a video file being transferred to my server. As soon as the video starts arriving I begin playing the video via the "video" html5 tag. However, if there is any sort of pause in the transfer of the video, the video stops playing (as expected.) Is there any way (I expect it would be via javascript), to automatically start playing the video where it left off as more of the video bits arrive on the server? I've noticed, if I add the "controls" and the video pauses, hitting the "play" button, starts the video from the beginning again. I just want it to continue playing where it left off. Is that possible?
How about set autoplay
<video id="myVideo" autoplay>
<source
src="http://yourSite.com/yourPath/video.webm"
type='video/webm'>
<source
src="http://yourSite.com/yourPath/video.ogg"
type='video/ogg'>
<source
src="http://yourSite.com/yourPath/video.mp4"
type='video/mp4'>
</video>
Add the "loop" attribute to your video element like so:
<video loop>
<source
src=videos/video.webm
type=video/webm>
<source
src=videos/video.ogg
type=video/ogg>
<source
src=videos/video.mp4
type=video/mp4>
</video>