playing mp3 and difference between file:/// and http:// - html

i have a problem about playing mp3/mp4 in firefox and internet explorer, what difference between run a page including following code using double-click on it(file:///...) and run that using iis (http ://...)
<object data="../../Media/Music.mp3" width="200" height="150" type="audio/mpeg"></object>
when i double click on it file music or movie doesn't play, but when i open it using iis (http ://) music plays???
what's the difference? thanks all

You are most likely running into Same Origin Policy problem regarding file: URIs.
See this MDN reference:
For example, if you have a file foo.html which accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html.
Try moving your mp3 to a directory that is contained within the same directory as your HTML-file.

Related

HTML audio tag play button is greyed out on Django project

For some reason the play button is greyed out on my Django website. I used this same exact HTML code in a blank HTML document and it worked as it should, so I don't think there's a problem finding the file, or a syntax error. While running the server locally I am not seeing any errors in the command line either.
How it looks on blank HTML file
How it looks on website
Code:
<audio src="C:\Users\zach2\music\download.mp3" controls>
</audio>
Is there something that I need to change in one of the Django files to enable audio to work properly? I am very new to Django and Web development.
You can put the file inside your server root (within a media or assets directory) instead of trying to load it directly from that path.
Local files are generally not accessible to a browser for security reasons. Else any website would be able to access your sensitive files just by guessing and putting in the most common paths.
One thing is you cannot access local on hosted website may it be local or remote files, unless you are using blank HTML page just like you did. This is because of a security concerns.
If you do want to server your media files such as audio, images, videos, etc. normally you can put it inside media folder inside your django app directory if you are handling with user uplodaded files or any non-static files.
To handle staticfiles and mediafiles in django you can refer to this link https://docs.djangoproject.com/en/3.2/howto/static-files/

IE background-image svg issue [duplicate]

I'm trying to get this simple code to work:
<a href="#" target="_blank" style="display: inline-block;">
<object data="icons/chrome.svg" type="image/svg+xml" style="pointer-events: none;">
fallback text
</object>
</a>
When I use
data="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg"
it works. However when I save that exact file onto my own server and reference it as above, it just shows the fallback text in Firefox. In Chrome it downloads the file when I open the page (which proves that the file link is correct).
Anyone know what's going on here?
I can think of four possibilities:
Your server is using the wrong MIME type for SVG images. (Can be fixed by adding AddType image/svg+xml svg to your .htaccess file; other methods discussed here)
You saved the SVG file somewhere else and it doesn't exist at icons/chrome.svg. (Try navigating straight to the SVG file at icons/chrome.svg. Does it display in your browser?)
You saved the file with insufficient permissions, resulting in your web server being unable to access the file. (Can be fixed by navigating to the icons directory and typing chmod 0644 chrome.svg at the command line prompt.)
The file you downloaded from nocookie.net isn't actually an SVG file at all. (Try opening it inside a text editor.)
I was experiencing the first of the problems described by #r3mainer.
On my lighttpd server the problem was caused by the missing
".svg" => "image/svg+xml",
line in the mimetype.assign section of the lighttpd configuration file.

Abolsute paths not working on <img> src

I am reading a JPG file from a local directory and when I render the web page, it does not show the image.
I do not want to move this image in the project directory. I want to keep it as-is in the local directory.
This is what I have:
<img src="file://C:/dir1/dir2/filename.jpg" alt="Smiley face" width="500" height="400"/>
I'm using IE to display the web page. What do I do?
The absolute path is from your root web directory, not your file directory:
<img src="/images/filename.jpg" alt="Smiley face" width="500" height="400"/>
If that file is not inside your root web directory or a subdirectory thereof you won't be able to view it in your HTML (without the help of server side code).
You might still get away with images. But as far as I know, you cannot load files from local disk. This would be a massive security breach as a webpage could load anything it wanted from your hard drive.
You will need a small webserver to load external assets...
here is a great explanation why...
You still can do something like that, but you will need server side code that would evaluate the request and serve the content of the file to the client with the appropriate MIME type. The file:/// URIs always refer to the client local file system, so the server would not even receive such a request.

image is not showing on html page

I am new in Ubuntu, as well as using lampp, My problem is, after storing image in image folder of my apps, image is not showing in HTML file ( image not found ). localhost document root is /opt/lampp/htdocs/, and my root folder is f_21 if I use the following link
http://localhost/f_21/index.html // not works
But image showing works well if I use following link:
file:///opt/lampp/htdocs/f_21/index.html // but it works
Any idea ??
You should keep both image and index.html files under htdocs.
for you,place your index.html and image files under f_21 folder and update src attribute of img tag in your index.html
If the link to the image is an absolute path based on your file system with the file protocol, then you won't be able to load it when viewing the html page over http.
Chrome doesn't (I'm not sure about other browsers) allow loading local resources on a file requested with http.
If you're using chrome, you can press ctrl+shift+j to see the console, which will show any errors. You might see something like: Not allowed to load local resource.
The solution is to change the src of the image to be relative to the html page it's on.

View local html file with .asp extension in browser

Hi I have crawled a website for offline view, but many pages are downloaded and saved as .asp and there are links that point to these pages. But when I open these html page that has .asp extension in Chrome browser, the chrome will download the page instead of rendering the page. Is there a way to set the chrome to render the page instead of downloading it ?
Thanks
Chromium uses the system mime-type for the local files. On Linux you can change it in the xdg-open configuration:
$ mkdir -p ~/.local/share/mime/packages
$ cd ~/.local/share/mime/packages
$ touch application-x-asp.xml
Then edit the ~/.local/share/mime/packages/application-x-asp.xml:
<?xml version="1.0" encoding="UTF-8"?>
<mime-info xmlns="http://www.freedesktop.org/standards/shared-mime-info">
<mime-type type="text/html">
<comment>Active Server Page</comment>
<icon name="text-html"/>
<glob-deleteall/>
<glob pattern="*.asp"/>
</mime-type>
</mime-info>
to set up the mime-type to text/html. On te end you have to logout/-in again, or just run:
$ update-desktop-database ~/.local/share/applications
$ update-mime-database ~/.local/share/mime
When your browser opens a file it uses the MIME type to decide which action it should take, typically download or open in the bowser.
So, for example, it encounters a zip file it will open the file save dialogue box and allow you to save the file.
And, if for example, you request a .asp from your browser which is served from a web server the browser will use the MIME type to decide which action to take, which will be to display in the browser.
The MIME type will be sent within the http headers and this would not be sent to the browser when you open your off-line .asp pages.
So if you could change the MIME type to "text/html" for .asp it should open it in the browser.
Unfortunately, there does not seem to be an option for changing MIME type / actions in Chrome.
You can change these setting in Firefox within Tools > Options > Content > FileTypes > Manage..
There is a way to open local, .asp files as HTML in Firefox.
Find your Firefox profile folder. On Windows 7, I found it here:
C:\Users\user\AppData\Roaming\Mozilla\Firefox\Profiles\738xdie.default\mimeTypes.rdf
Then add these lines to mimeTypes.rdf
<RDF:Description RDF:about="urn:mimetype:text/html"
NC:fileExtensions="asp"
NC:description="ASP Pages"
NC:value="text/html"
NC:editable="true">
</RDF:Description>
Restart browser. Your local file will now render as HTML.
There may be a similar technique with Chrome.
I suppose you want to view downloaded pages directly, that is not via some local web-server. Then I'd suggest to change (or append) file extensions during download according to their reported content-types from response headers. Of course, this will require to adjust all links to changed filenames inside other files. The other approach could be to store content-type of each page in a meta-base, and using a local web-server to serve the files according to their actual types from the base, not file extensions.
I have two solutions for you. the first one is to open those files with firefox.. and that's it..
if you insist to open them with chrome. you have to change all files extension to html instead of asp. use some programs for renaming..
but the links will be broken between pages..
so you have to find the js file that all pages use add this code in it to fix the links
document.body.addEventListener('click',function(e){
if(e.target.nodeName=='A'){
e.preventDefault()
href=e.target.href.split('/')
href[href.length-1]=href[href.length-1].replace('.asp','.html')
href=href.join('/')
parent.location=href
}
})
})