I have added this <audio> tag in my html page,
<audio id="music" autoplay="autoplay" loop="true"><source src="~/Content/songs/music.mp3" type="audio/mpeg" /></audio>
if I run the web page with this <audio> tag into any PC browser it works fine, the music gets started on page load, but the same web page doesn't play any music in mobile browsers.
Tested it on android(chrome), windows(edge).
Please can anyone suggest something for it, is there something I missed here.
Any help is appreciated.
There are some other posts for this type of question, but they are specifically for apple devices. I need to know if there are any workarounds for android or windows mobiles.
Related
I'm building a website with php that echos the following html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="video_media" style="position:relative; z-index:1; display:block; margin-left:auto; margin-right:auto; width:700px;" controls>
<source src="uploads/15 dialogo 13.mp4" type='video/mp4'>
</video>
</body>
</html>
When I view the page in google chrome there is only a set of controls. The audio plays if I press play, but the video does not show in google chrome. In safari and microsoft edge the video will show up and play fine with the controls.
I didn't tag php in this because when I make an html file with this code the same thing happens, so I'm fairly sure its not an issue with the php.
I've googled this a lot in the last couple days and I haven't been able to find anything about other people having the same problem. I've changed settings on chrome on my computer to try to view the video but that hasn't done anything. I also don't think that it's a chrome settings issue since I've never noticed other sites' videos not playing on my browser.
If there's an obvious answer that I'm missing, sorry... I'm fairly new to web design and I've never used videos on a web page before. If there is another question that has been asked that has the same answer, also, sorry. I did search here first, but I might have missed it. Please just point me to that page. Thanks,
------------UPDATE------------
It doesn't work on firefox either by the way.
Also, I can download the file with audio and video working after download. It's just not playing in the browser.
Can you try with:
<source src="./uploads/15 dialogo 13.mp4" type='video/mp4'>
or meaby changing the name of the video:
<source src="./uploads/test.mp4" type='video/mp4'>
--UPDATE--
Apparently the problem is generated by video codecs
I have one mp4 video that won't play in Chrome or Firefox. The audio plays, with the controls, but no video. What fixed it was pulling the video into Final Cut Pro, which said that it was a non-standard size or format, then I "shared" (exported) the file back onto my hard drive. The new file plays in all the browsers. The file size jumped from 32 MB to 98 MB, for a three-minute SD video.
I tried to make a fan-website for a artist so I wanted to have start page music which automatically plays. But, when I open the start page, my audio file doesn't play.
This is my code:
<audio controls autoplay loop>
<source src="https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3" type="audio/mpeg" />
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
What I need to do to make this start playing automatically?
autoplay is a html standard. It's up to then browser to support it or not. I suspect you used Chrome, like so many others, and were surprised it didn't work.
https://www.w3schools.com/tags/att_audio_autoplay.asp
If you test this code, like I did, in Firefox 63, it will work fine.
Google decided to break the web standard in May 2018:
https://bugs.chromium.org/p/chromium/issues/detail?id=840866#c103
As of 2020, browser defaults mean this won't work in Firefox (all platforms) and Chrome (Android included, but not Mac it seems).
it depends on your browser's [here Firefox]
Autoplay preferences (blocked or not) in
about:preferences#privacy
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 am currently making a static site that makes use of a .mp4 video. I am using Middleman and hosting with Heroku (free plan). On my local server everything works wonderfully, but in the deployed Heroku version the video appears as a black box. In Safari and Firefox there is no container at all. All my other assets seem to be loading nicely. The video is 5.9 mb. Any idea what is going on here? Thank you in advance!!
<video class="vid-home" src="/videos/home.mp4" autoplay loop muted></video>
In theory, if you do not specify a 'poster' image to display before the video starts, the browser should display the first frame of the video:
http://www.w3schools.com/tags/att_video_poster.asp
In practice browsers seem to implement this inconsistently, and I have seen some mobile devices cases where certain videos display the first frame and others a black box, even for the same video types.
To avoid the issue you can specify your own image to be displayed using the mechanism mentioned in the link above - this should work consistently across browsers. The HTML will look something like:
<video class="vid-home" controls poster="yourImage.png" autoplay loop muted>
<source src="/videos/home.mp4" type="video/mp4">
Your browser does not support the video tag or format.
</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!