How to anchor audio or video in HTML? - html

I'm just a beginner.. How to play a video or audio using the anchor tag?
I used the tag n it played normally... I used the n it played... But when I anchor it:
<html>
Click here!
</html>
It launched WMP or VLC... Is it possible to play it without launching other applications?

You can use HTML5 tags, like video or audio . It's fairly easy to customize. See this example.
Be aware that old browsers don't support HTML5 and that you need different versions of the files for a couple of browsers. It's all explained on the linked sites.
What you are doing now is using the a tag to link a file. This will not embed the content in your website, but opens a player on your computer.

Related

Can I link audio thats not local into my html file?

My hosting doesn't allow me to upload mp3 or any audio files, so is there any way I can link audio in some other way? I know we can embed soundcloud and stuff but just wondering if there was any other alternative.
I’ve found this very useful guide that covers some alternatives:
Linking to a sound file using a href allows a browser to open and play
an audio file if the viewer of your web page has properly configured
their Internet browser. You can also use the tag or the newer
tag to insert a sound file directly into a web page.
<a href> tag
<a href="https://www.computerhope.com/jargon/m/example.mp3">Play sound
file</a>
<audio> tag
The tag can create a media player as part of the web page. It allows the visitor to play, stop, pause, or download an audio file. The element is compatible with all modern web browsers.
<audio controls>
<source src="https://www.computerhope.com/jargon/m/example.mp3" />
</audio>
<embed> tag
An older method of including audio files is to use the tag. While this method certainly works, it is less efficient than those which were mentioned above. As such, we recommend using one of the solutions demonstrated above.
<embed src="https://www.computerhope.com/jargon/m/example.mp3">
I figured the best way to do it without uploading your audio/music, BASE64 ENCODING!!
Very easy, kinda messy and supposed to be used for images I guess but works fine with audios and should work with videos as well (haven't tried videos)
Here a base64 encoder: https://omatsuri.app/b64-encoding
WARNING THOUGH! IT MIGHT GET LAGGY & MESSY

What are the differences between using an HTML5 embedded video vs. an iframe with a YouTube link?

I'm debating whether or not to store a video on my server and call it through an HTML5 tag, or upload the video onto YouTube and use an iframe to embed the YouTube link. I'm not sure which would work more efficiently, or the differences between each one. What are the differences between using a HTML5 video tag and using a YouTube link and iframe tag?
Using a self-hosted video with HTML5
Advantages:
Full Control over markup and interface
Disadvantages:
Browser support is in your hands
Video download will be slower on your server as compared to YouTube
Recommended Usage:
Use a javascript plugin like https://plyr.io/ which will help with cross-browser and responsive concerns. Serve the video from a CDN if possible
Youtube Hosted
Advantages:
Performant
Browser support is everything
Disadvantages:
YouTube branded by default
Little control over the interface
Recommended Usage:
Use iframe embed code provided by youtube. For responsive assistance, see http://embedresponsively.com/. Also plyr.io allows you to play YouTube videos.
For my experience with <iframe> and <video> tags:
I found an issue with the <iframe> tag when you want to do an autoplay for your video while using a mobile or tablet device with "Chrome" & "Apple".
In my case, I used to do a click function to play video, that's what is impossible with <iframe> tag, so I use the <video> tag to resolve the issue.

create an anchor tag for wmv file that works on all browsers

I want to add a link(wmv file) to my page that would work across all the browsers. Currently, the link is embedded automatically on the page in IE8. I could add an object tag with object type="video/x-ms-wmv" but that would work only in windows not on mac.
My video
wmv is a proprietary media format that is only supported by certain plugins. You will not get universal support for it.
If you want to embed video with good browser support then you need to use a mixture of codecs and container formats.
You can use HTML 5 video with webm for most, falling back to HTML 5 video with h.264 for a couple of browsers, and then Flash for everything else.

youtube.com and html5 video tag

I have a question. I know youtube has supported html5 for some time, so I just tried disabling the adobe flash plugin and took a look at the page source. I found no video tag. Could anybody explain that?
Using chrome, after disabling Flash, I do get a warning when trying to watch videos ("You need Flash!"), but it detects that I don't have flash, and uses the HTML5 version instead. If you use Chrome, you can look at the DOM with the developer tools (F12), and you'll indeed find a video tag in the video-container div, e.g.
<video class="video-stream" x-webkit-airplay="allow" src="http://o-o.preferred.twtelecom-dfw1.v15.lscache5.c.youtube.com/videoplayback?sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cexpire&fexp=900161&itag=43&ip=207.0.0.0&signature=55FCBF36A597656FECBEC8E78051B3BD30EE8D97.8F8D573710D767EAF4429FBC54C940DF7611A1BE&sver=3&ratebypass=yes&source=youtube&expire=1330650696&key=yt1&ipbits=8&cp=U0hSRVZQTl9OUENOMl9OSlJHOlBlcHJOMW9PSHhH&id=381980b5e867a1c5" data-youtube-id="OBmAtehnocU"></video>
For almost everything Google does on the web they use javascript. Most likely what is happening is that they test the browser to make sure it supports HTML5 video, they then load the the video dynamically using javascript.
To verify, use a web browser tool to inspect the current html as it's shown, not as it's sent to the browser.
And as Marius noted, be sure to have HTML5 enabled

embed video file in my html file

i want to embed video file in my html file and that video file is saved in same folder where my html page is saved?so how can i embed that video?
I would advise using HTML5 to do this:
<video src="myvideo.avi"/>
This will work for Firefox 3.0+, Chrome and Safari. Not sure about the early IE (Internet Explorers). It also avoids having to use Flash to render a video window.
W3C Schools has a good article on the use of the video tag
W3schools has a great reference on the <video> tag here:http://www.w3schools.com/html/html5_video.asp
Another solution is to upload your videos to youtube and then embed the video on your site. It takes less server space on your part, it is widely supported, and you can get discovered easier.