getting audio to work on different browsers from a server - html

I have used HTML 5 audio tags like the following
<audio controls="control_2">
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\WAV\home_page_readout.wav" type="audio/wav"/>
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\MP3\home_page_readout.mp3" type="audio/mp3"/>
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\ogg\home_page_readout.ogg" type="audio/ogg"/>
</audio>
Now when i load the page when it is not uploaded to a server it manages to work on chrome and IE, however on other browsers the player appears, but there appears to be no file as nothing happens when i press play.
Now when i put the page to the server (I am using USB webserver V8.2) i get nothing no matter what browser the players dont even show. I have tried changing the links to relative and nothing and ive checked that all my files are there and they are. They work when I click on the actual file on the server so i dunno.
Any help would be appreciated thanks :)

To solve the second half of your question, and potentially the first, use relative paths to load the audio files. So if your web server loads the file from /var/www/website/index.php, places the files in a closer path, ie /var/www/website/sounds, and then load the files from ./sounds/FILE_NAME.EXTENSION

Related

My video is not playing in both Brave browser nor Firefox

I am new to HTML and CSS (So that may be the issue). I entered the following code into my html doc:
<video controls width="700">
<source src="video/PristineCustomCleansVideo.mp4" type="video/mp4">
</video>
The video I want to play is inside a folder called video. The index.html and the video folder are nested inside a folder together.
The video shows up on the site I'm making as a gray rectangle with controls (in a Brave browser). When I press play nothing happens. I also tried opening my page in Firefox and within the gray rectangle it says "No video with supported format and MIME type found."
I looked up this question and have found so many confusing suggestions. Whatever you recommend, please do it as if I know very little about computers (I thought I knew a good amount until reading some of the responses and can't follow what I should do. lol)
Another issue I am considering is if I have to do a lot of work to get the video to play, will others that I send my website URL to have issues as well? This is for a class project. I have to put everything on the school's server and share the URL with the teacher.
If your index page and the video are located in exactly the same place you do not need the video folder in the path to your file. The following should work.
source src="PristineCustomCleansVideo.mp4" type="video/mp4"

Preventing downloading file from a webpage

I have a webpage with an audio player - normally the code would look like this
<audio controls="controls" preload="auto">
<source src="http://the_full_path/file_name.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
I want people to be able to listen to the file using the player without being able to download the file its playing. These are the first steps I took:
was adding controlsList="nodownload" to the player
disabling right click oncontextmenu="return false"
The problem: from any browser going to menu 'view-> page source' or clicking F12/Cmd+u will show the code thus the link will be reviled.
How can I achieve my desired outcome?
'and obviously there is a way to do it'
No there's not !
#zero298 answer is perfectly right(any resaerch you will do will said the same and you see your question is commonly asked for years with same answer.
All stuff you can do can easily be override because in order to use a file client side the file is download on client(cache) in order to be use by browser in local place.
Look to how WWW work and you'll understand better i think:
web server send(upload) HTML and others files related to client who get it(download) for use.
That's root of a network and can't be otherwise. If you need anything to be shared on a network you've to send it. So you can see/use(an get) a file who is not shared nor block a file once it is send.

HTML <video> not working in chrome. Two http requests, the second one with size 0

I'm trying to display a local .mp4 video with html , but I'm not able to get it working in Chrome.
<video controls="controls">
<source src="/uploads/video/2015/10/562b8c42e64d9.mp4" type="video/mp4"/>
</video>
In Firefox works great. Checking the network section in dev-tools I've noticed that there's two requests instead of one, and the last one shows size 0:
562b8c42e64d9.mp4 200 media Other 78.8 MB 823 ms
562b8c42e64d9.mp4 200 media Other 0 B 3 ms
Any ideas?
Since you are trying to play it locally, without a server, it must use the "file" protocol. Therefore your source must be
src="file:///uploads/video/...."
On a Unix-like system, you will need to do it this way:
src="file:///home/me/uploads/video/...."
or similar to make sure the path is complete.
Also, source does not have a closing slash.

HTML5 video tag not working in IE when tested from localhost (XAMP /Apache)

Just as the title says. I've been working on a site and had added a big html video for the main page.
I looked over online...myme types checked, h264 encoding checked. I looked over old versions of the file i've been working on and noticed an old pure HTML file which loaded the video in all browsers with no problem (which I guess discards any encoding or video quality issues)
It all was working neat. Even displaying in firefox, chrome an IE. BUT for some reason the video does not load in IE whenever the file extension for the page it's on is .PHP. To be precise, whenever i try it from my LOCALHOST (XAMP with Apache server)
I also checked the dev tools and under network it does show it as the right content type and no error whatsoever (getting normal 200 result)
Here's the snippet of the video tag used:
<div id="video_container">
<video autoplay loop poster="video.jpg" id="header_vid">
<source src="imagenes/video.mp4" type="video/mp4">
</video>
LOL, and just noticed...not even the poster image is showing in IE...wtf.
I'm so confused, could anyone enlighten me a bit please? Could it be something related to the path used? been digging around the net for days _
Check if your url is formed properly when you are using .php extension on IE. Same issue addressed quite a few time here.
mp4 from PHP - Not playing in HTML5 Video tag ||
Play mp4 file through php in HTML5 Video Tag in Chrome?
I notice IE doesn't like the properties without value, so try
<video autoplay="" loop="" poster="video.jpg" id="header_vid">

.mp4 file run in firefox but not render through video tag

Here is the configuration of system I am using
Ubuntu : 12.04
Mozilla Firefox : 26.0
I have a mp4 file, when I open it directly in browser like
http://localhost/MyProject/web/video/samples/A001C026_140418WK.mp4
It runs in browser properly, but when I try the same file to render through html5 video, it is not getting played and shows below error.
No video with supported format and MIME type found.
I know this question is appeared many times but I did not get the clear way to kick this problem, second thing this file is getting played properly using <embed> tag.
Video tag syntax
<video width="854" height="480" controls>
<source src="{{asset('video/samples/A001C026_140418WK.mp4')}}" type="video/mp4">
Your browser does not support the video tag.
</video>
path specified is correct, I have checked properly.
Please guide, where the things are going wrong or missing.
Thanks in advance.
Your problem seems to rely in the fact your mime types are not properly configured server side. Have a look here for set up steps. Make sure you restart/reload your web server for changes to be taken into account
After you have checked that it should work in a HTML5 video tag.
For MP4 H264/AAC to work with Firefox on Linux you need to have GStreamer codecs being installed. But I guess you have that covered. You can find more information in this article section notes.
You can check this question for further troubleshooting steps.