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>
Related
<video controls autostart muted>
<source src="music/1.mp3" type="audio/mp3">
</video>
I tried embed,but it can't auto play.
You can do that with autoplay attribute, example from w3schools:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
A note for autoplay attribute by Mozilla:
Note: Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.
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 have been looking into how to implement HTML5 videos as a
background
video on web and mobile, below is the following code-
it displays but not autostarts, this is the problem
<video width="100%" controls autoplay>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
Depending on your Chrome version you might get the new implementation of video autoplay rules:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Taken from: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So you can try it muted:
<video width="100%" controls autoplay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
I had similar issues with autoplay not having any effect regardless of usage of muted. Unexpectedly I had success when specifying autoplay as camel case autoPlay
In React you need to add the attributes of tags in camelCase. So in this case It has to be autoPlay.
It's too old thread now. But still I have a suggestion if you want to use.
Instead of the autoplay attribute(because other told it's only work always if it also has muted) you could use one thing:-
function playVideo()
{
document.getElementById("vid").play();
}
a very simple function in javascript. Make sure to give your video Id 'vid' or change it here. Video Example
<video id="vid" loop controls>
<source src="Videos/vid.mp4" type="video/mp4">
</video>
and in body tag write this:-
<body onpageshow="playVideo()">
It worked for me. Maybe for you too
Make sure you check browser permissions. If the site is not secure (http), then autoplay on websites will be disabled.
To make changes you can click on the left side of the Address Bar of the browser and click Allow audio and video.
Just change autoplay as camel case autoPlay
<video controls autoPlay loop muted>
<source src={myvideo} type="video/mp4"/>
<source src={myvideo} type="video/ogg"/>
Your browser does not support the video tag.
</video>
Had a similar issue. The fix is to camelCase autoPlay.
So the following should work:
<video autoPlay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
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.
I not sure how to explain. It is regarding about html5 video tag. I had setted it prefect except one. When my video is loaded (not playing. only display on html), its show white background. It is because video 00:00 is white background. Can I set to 05.23 (which show more interesting view.)?
Need help. Many thanks.
You can add "posters" to your video tags, which are like default backgrounds before the video starts, see:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
So then you could save a screenshot from your video as an image, and add it as a poster.
Maybe consider using a library like Video.js, which gives you lots of additional functionality.
https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md
You can specify the start position within the <source> tag itself.
<video controls>
<source src="blah.mp4#t=323" type="video/mp4">
<source src="blah.ogg#t=323" type="video/ogg">
</video>
That #t=323 will provide the start point to the html video player in seconds.