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.
Related
I am trying to use tag to play mp3 in a page. The website is based on WordPress. The audio players do not appear in safari but working others browser.
This is the page url: http://soundhealingcenter.com/love/braintests/
Here is the code I am trying to use:
<audio controls="controls">
<source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>
The audio players * do appear* in Safari, and the audio can be played back properly. It just seems that all audio is loaded simulataneously, and since each one is about 20 minutes, that takes a lot of time, also depending on connection speed. In my case, the second one finished loading first, then 4, 5, 9, 10. The others are still loading (and can't be started yet therefore).
So you might want to consider deactivating the automatic loading on page load by adding the attribute preload="none" to the audio tag, so that would be
<audio controls="controls" preload="none">
<source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>
I also faced a issue like this and by preload attr in audio tag fixed it.
Since my audio files are small, i used preload = auto. Safari will start playback only once the complete audio is downloaded.Here is my Ref:https://codepen.io/aravi-pen/pen/OxPaVb.You can Refer here for more about preload tag:https://html.com/attributes/audio-preload/
Thanks!
The website has a simple HTML video as seen below:
<video id="myVideo" controls preload="metadata" playsinline webkit-playsinline="true" poster="vid/vid_pic.jpg" width="640" height="360" style="background-color: black;" >
<source src="vid/vid.mp4" type="video/mp4" />
</video>
All browsers and devices play the video fine when you click the play button. However iOS phones refuse to start the video, the users just keep tapping the play button but nothing happens.. They must refresh the page and then it works as intended.
I used to have a video wrapper but stripped it out because I thought it might have been the culprit.
The video is 720x1080, 2 minutes long, and optimized to be 36 MB.
Obviously this is not the ideal use case.. Any way to make a video start without a hitch on apple devices/safari?
I have a full width background video with autoplay and loop propreties and works really good on desktop but in mobile video dont show and dont start... just show a black screen
I need to fix this for mobile, if that's not possible to put video working on mobile I can put a background image on mobile
<video autoplay loop muted autobuffer preload="auto" poster="poster.png" class="background-video">
<source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
</video>
adding playsinline attribute to the video tag fixed the issue for me.
according to a good google search, on mobile the Video element falls back to a poster...
be mind full of video size so they user will not encore massive data usage charges and to maintain a responsive site.
<video playsinline autoplay loop muted id="myVideo"></video>
The Autoplay tag on mobile is generally not supported - this is to avoid users incurring data transfer costs as video files are large and can eat into data limits.
The poster tag should work fine, however, as I think you noted in your last comment.
Turns out the video actually plays - but it's weird how that happens!
First of all, I'm testing on Android 5.1.1.
Alright, here's the situation:
On load, the video doesn't play but instead displays the fallback poster image.
I had given up on the video thing, but when I was navigating the site and at some point decided I wanted to go back Home, I navigated to the Homepage and the video was playing! I tried refreshing the page, and the video didn't play on load but instead got the poster image!
What could be happening?
I figured just clicking the phone's back button to navigate to the homepage still didn't play the video, but explicitly clicking the home link did!
So I gave it another shot - refreshed the page, video didn't play, clicked the home link and the video started playing on load!
This is the structure of my home link: <img src="path-to-logo" />
Can somebody explain what could be happening?
Context:
Making an advanced video-player using web components technology (polymer-project.org) I have found some problems when I tried to include 2 instances of the video-player playing the same video resource. Analyzing the problem I have realized that it has nothing to do with polymer but with the HTML5 video tag only on Chrome browser.
Problem:
The source of my test html page contains essentially the following code:
<video id="video1" width="100%" controls>
<source src="/test/resources/video1.mp4" type="video/mp4" >
</video>
...
<video id="video2" width="100%" controls>
<source src="/test/resources/video1.mp4" type="video/mp4" >
</video>
The effects of the anomalous behavior can be outlined as:
The second video does not show the first frame (a black player is shown instead)
Trying to play the second video player it does not work
The first video player works as expected
After pausing the first video, the second one appears on the player
Now the playing command on step 2 seems to respond and start suddenly the second player
Summing up, it is impossible to play both videos simultaneously. This only happens on chrome (neither on Safari nor Firefox) and when the video resource is the same one.
Question:
Does anybody have a suggestion about how can I proceed in order to fix the problem with chrome?
I have created 3 versions of a video file using Miro Video Converter to facilitate different browsers and I am using the following code to play them...
<video class="rw-video video-js" data-settings="rw-green rw-flat-color rw-rounded" title="My movie title" preload="auto" controls width="800" height="400" id="exampleVid1" poster="images/video.png" >
<source src="images/movie1.mp4" type="video/mp4" />
<source src="images/movie1.ogv" type="video/ogg" />
<source src="images/movie1.webm" type="video/webm" />
<p>Your browser does not support the video tag.</p>
</video>
The video plays just fine in firefox and safari but not in chrome - it appears to play in chrome but never starts - the hourglass just goes round and round and it never plays. I have checked filenames and that the video is uploaded. Any ideas? I wondered if Chrome maybe interprets "preload="auto"" to mean preload the entire video but fiddling with that didnt make any difference I could see. The movies are around 50mb in total and load instantly in other browsers.
this is actually a Google Chrome bug which prevents it to load more than 6 MP4 videos. Try putting preload="none" on all the videos and then start clicking on them. You will probably be able to open 6 of them but on 7th video Google Chrome will hang. That is how it is with me, but maybee this will happen sooner on your system.
But you will trigger the bug if you have MP$ video among your videos, so it is best to completely avoid the MP4 format. I solved it completely by using webm video format.