I have following problem. I have embedded video on my page:
<video id="video_1" width="520" height="360" controls="controls">
<source src="http://patho/to/video.mp4" type="video/mp4" />
</video>
When i open my page i see black box. After 4-5sec play icon is being displayed.
Is it possible to see this play icon immediately ? I tried to do a progress bar or something and checked all media events -> http://dev.w3.org/html5/spec/single-page.html#mediaevents .
But it looks like this problem is not connected with my video but with quick time which need time to be loaded. Am i right ? Or there is a workaround for this ?
One thing i can do is to initialize video earlier and then just show it via js ...
Take a look at this document about preloading? If your file is huge sized, then nothing could be done.
PS: IOS has own way of playing html5 video, is hardware accelerated and displayed above browser by system hack. That's why I think there is nothing that could be done.
what you can do is use the poster setting of the video tag:
<video poster="http://link.to/poster.png">
<source ... />
</video>
this should lead to the image being displayed immediately after download of it,
then download the play button once the player and the vid are loaded.
have fun,
jascha
It sounds like the index is at the end of the file: How to get your HTML5 MP4 video file to play before being fully downloaded.
Related
I am using a laravel project and i have implemented a html5 video tag. Video starts streaming whenever i click on play button but the problem is whenever i try to forward the video player for some duration then video automatically starts from beginning.
I have also disabled all javascript and css files attached but still same problem exists and there is nothing wrong with the video as this problem does not appear on other PHP projects when i use the same video..
<video controls width="100%">
<source src="http://127.0.0.1:8000/storage/elearning/3/tutorial/62a0df6b1c38d.mp4" type="video/mp4">
</video>
I have a video that I would like to embed in an O365 website using HTML5 embeding code. When I insert it, the video works fine but as soon as I click save the video area is just a black box and I can't play it. If I click to open it in another window it does play fine though for some reason.
The code I am using is the following:
<video width="320" height="240" controls>
<source src="my video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Any idea why this would be happening?
While my questions remains valid as I don't know why it is happening, I found a work around for anyone having the same issue.
Rather than inserting the html embed code I inserted a media web part which was much easier and worked! I recommend this route!
My video poster appears in Chrome / Firefox but is not displaying in Safari. My play button appears and I can play the video, but the poster is a no show. Mark up is below. Any thoughts?
<video id="video" controls poster="/assets/img/background/simon.jpg">
<source src="/assets/img/video/want-it.webm"
type='video/webm;codecs="vp8, vorbis"'/>
<source src="/assets/img/video/want-it.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<object data="" type="" class="simon">
<img src='/assets/img/background/simon.jpg' title="Your browser does not support video">
</object>
</video>
Thats coz its the default safari behaviour they load the video as soon as its first frame is ready to play. one thing that temporarily shows the poster is to set the preload attribute to none on the video tag. preload="none" but again the poster will go away as soon as the video disappears. Following is a hacky way I did it in React but you can adjust it for any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
i have a html5 video embedded in a web page, that appears with a fade when an user clicks on a link.
If i click on play, the timeline cursor jumps to the end, not playing anything.
If i click on the timeline (so seeking) the video starts from the point where i click and plays normally.
I already added the video formats in the .htaccess.
How can i fix this?
On chrome it works as intended.
<video width="660" height="275" controls="controls">
<source type="video/webm" src="video/nev.webm"/>
<source type="video/mp4" src="video/nev.mp4"/>
<source type="video/ogv" src="video/nev.ogv"/>
<source type="video/flash" src="video/nev.flv"/>
</video>
Roby
I fixed changing video converter, i used "Miro Converter" and it was creating this problem, "Any Video Converter" converted the video making it work in firefox.
I think that the problem is the dimension of movies, specially the format. While I was using 600 x 480 px everything play perfect, but beyond of this relation the timeline cursor doesn't works in autoplay unless I " push " the cursor 5 sec. forward .... I also use Miro video converter.
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).