HTML 5 VIDEO TAG - STATIC NOISE - google-chrome

I noticed there is a difference between Chrome and Firefox. I display some videos using the HTML 5 video tag. When I played a video in Chrome, I didn't hear any static background noise; in the Firefox browser, the video is OK but contains a static noise.
The page has 8 links that open a new window.
Here is a sample of the code:
<a
href="HS-Health_Safety/handling-caustic-safely.html"
onclick="positionedPopup(this.href,'myWindow','1278','810','100','200','yes');return false"
>
Handling Caustic Safely
</a>
Each page contains code like this:
<video width="1278" height="810" controls>
<source src="10-Step_Cleaning_Process/PC9.8_STEP_8_Post_Job_Review.mp4" type="video/mp4">
<source src="10-Step_Cleaning_Process/PC9.8_STEP_8_Post_Job_Review.mp4.webm" type="video/webm">
</video>
What I've tried:
I played the video alone, but there was no static noise. How do I remove this noise from Firefox?

Related

Html5 video lacks anti-aliasing?

I'm trying to add video to a portfolio site I'm working on, but it has this choppy quality to it, like it's lacking anti-aliasing.
Or it could be something else.. Does anybody have any clues?
It looks fine when I play it in a video player.
(Open the image in full view to see artifacts better)
Here's the code for the video tag:
<video width="100%" class="videoStyle" autoplay muted loop>
<source src="video/01-02.mov" type="video/mp4">
Your browser does not support the video tag.
</video>

HTML Video plays double when autoplay is enabled

On my wordpress site, when adding a video via the standard HTML Video tag, and then adding autoplay to it - when i then reload the page it sure autoplays but after a few seconds another instance starts the audio and then the audios are overlapping each other. How can i prevent this? This is my simple code.
<video width="400" controls autoplay>
<source src="/uploads/2018/04/ML_video-converted-with-Clipchamp.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Whats going on here?

HTML 5 video background on mobile

I am trying to make a video my background, which will loop. It works perfectly on PC, but once I test it on mobile (IOS) it doesn't appear.
I've tried putting playsinline and making the the video path absolute, but it it still doesn't work on mobile.
HTML
<video autoplay muted loop playsinline id="myVideo">
<source src="vhs.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Note: What could be an alternative to having a video be the background?
I initially wanted the same video, but in .gif format. However, it was not nice.

HTML5 video tag not showing thumbnail on mobile Safari

I am trying to embed a Vimeo video on my website:
<video id="home-video" autoplay="autoplay" loop="true">
<source src="http://player.vimeo.com/external/XXX.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://www.mywebsite.com/XXX.webm" type="video/webm">
<img src="http://www.mywebsite.com/XXX.jpeg">
</video>
This works great on HTML5 supporting browsers, but in mobile safari (iPhone), since the video is not automatically played, a thumbnail of the video is expected to be displayed. Instead, I only get a black square.
After play/pause of the movie on mobile, the thumbnail is displayed correctly.
How can I fix that?
Convert your .jpg image to .png and it will work.
I had this issue and since then I use .png to posters inside <video> tag, because .png posters work on every browser.

HTML 5 Mobile Safari Video is not playing unless accessed directly

I am using jquery mobile and video tag to display videos.
My video plays fine on all 'desktop' browsers, but when play when I use the following code in mobile safari (iPhone) it shows only black rectangle without any controls.
I used video used commonly in html5 examples. (from http://www.bigbuckbunny.org) so it shouldn't be encoding issue.
When I access video directly by typing its url http://myurlofvideo.mp4 it plays correctly in mobile Safari.
What's causing the problem?
Thank you in advance!
<video width="75%" id="video1" controls="true" autoplay="true">
<source src="videos/mov_bbb.mp4" type="video/mp4">
<source src="videos/mov_bbb.webm" type="video/webm">
Your browser does not support the video tag.
</video>
I tried the sample below in iphone simulator and it is working ,check it out .
<video width="320" height="240" controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
Your browser does not support the video tag.
</video>
it shows preview image of the video,when you click on it plays in fullscreen.