I am going through strange problem with chrome, I am working on a web page that has 13 Mp4 Videos on page which I load using HTML5 Code as given below.
<video width="900" controls>
<source type="video/mp4" src="videopathhere">
</video>
URL of the page is http://www.htsolutions.com/beta/company/clients, when I open this page in chrome it will show 8 video thumbnails and then it will stop loading, it won't even load other pages of the website until this page is closed.
Did any one run through this isssue? well, whatever (first eight) video thumbnails are loaded do play when clicked on them, so no problem with running the videos only problem is loading entire page, this page works fine under firefox and other browsers.
I am checking this on chrome version 48.
Regards
Manoj Soni
It took long time, less views and no answer for me to get into the solution of the answer.
Chrome always run into issue when we use more than specific number of MP4 HTML5 videos on the page and hangs, solution for the same is not preloading the video, so my video tag changed to this.
<video preload="none" width="900" controls>
<source type="video/mp4" src="videopathhere">
</video>
Issue is resolved, I am putthing this answer for anybody who is running into the same problem.
Regards
Manoj Soni
Related
I have working code for a video element within my site thats fully functioning on ios 9/10 and all the normal browsers (chrome/ff/ie) etc.
I've noticed that since the ios 11 update the videos no longer play or even work at all. They appear as a blank box with the controls but pressing play does nothing and opening the video full screen does nothing.
Here is my relatively simple code
<video playsinline onclick="play()" controls autoplay
controlsList="nodownload">
<source src="assets/images/video_im.mp4" type="video/mp4">
</video>
I've tried different variations of using playsinline="true" and controls="true". They have no effect.
I've tried to google the issue but there seems to be nothing except a podcast taking about ios 11 removing html5 video support, surely there is a fix?
Any insight/help would be much appreciated.
Cheers
It looks like the following code:
<video>
<source src="path/to/video.mp4">
</video>
stopped working on ios11 (with many other features too...). I confirm that source tag did work on ios9 here). Try placing the src="path/to/video.mp4" into the video tag directly, it should work on ios11.
A working example taken from webkit.org post on New video Policies for iOS:
<div id="either-gif-or-video">
<video src="image.mp4" autoplay loop muted playsinline></video>
<img src="image.gif">
</div>
Safari on MacOS seems to have a similar problem, maybe it's easier to test there. Looks like we lost the multiple source feature tho :(
I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.
e.g.
instead of:
<video src='/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/myVideo.mp4' controls> </video>
I have added a video to my website
<video controls style="width:410px;height:225px;">
<source src="video/video_example.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
Whenever I reload the page, the network section in my Chrome Webdeveloper runs it 3 times.
Why is that?
The browser requests parts of the video in order to figure out if it can play it or not before getting the rest of the file to play.
This is normal behavior and is called streaming.
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?
Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.
Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.