laying online stream in HTML webpage - html

I want to play this audio live stream in html browser
http://uk3.internet-radio.com:8405/live
I tried several players with no hope
any player than can do that? or plugin

You can try something like this:
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<video controls="" autoplay="" name="media">
<source src="http://uk3.internet-radio.com:8405/live" type="audio/aac">
</video>
</body>
</html>
To try, save it as .html file and run.

Related

Audio file not playing

I want to embed the audio file on the html page on the server. The audio file is in the same folder as the html file, the path in src in the tag audio is correct, why is it not playing?
html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio>
<source src="f.mp3" type="audio/mp3">
</audio>
</body>
</html>
As described in mdn (https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio), the <audio> tag should be writted like
<audio src="f.mp3" type="audio/mp3"></audio>.
If you want to display your player, add controls to your tag.
If you want to play the media when the page load, you can add autoplay, but, many web browser not enable autoplay by default as you can read here https://developer.chrome.com/blog/autoplay/

Why don't my vtt subtittles show up on my html5 video?

I'm trying to use subtitles with my HTML5 video tag, but I can't get this to work.
I think the issue is that the video source isn't a local file.
Does anyone know how I can get around this?
<html>
<head>
<style id="stndz-style"></style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<video id="video" controls autoplay="" name="media">
<source src="http://localhost:8888/" type="video/mp4">
<track label="Dutch" kind="subtitles" srclang="nl" src="/home/ubuntu/Desktop/scripts/example.vtt" default>
</video>
</body>
</html>
and this is my example.vtt:
WEBVTT
00:01.000 --> 00:04.000
Never drink liquid nitrogen.
00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.
Turns out that cromium not letting me use local files was the issue. So my workaround is to run chromium like this:
chromium --allow-file-access-from-files

Track element is not working with audio element

I am trying to use the track element with audio element but it is not working for me, can someone give me some guidance
Looking in my console I dont see an error but i see this
Resource interpreted as TextTrack but transferred with MIME type text/plain: "http://127.0.0.1/output_trim.vtt".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<audio width="900" height="900" controls >
<source src="output_trim.ogg" type="audio/ogg">
<track label="English" kind="subtitles" srclang="en" src="http://127.0.0.1/output_trim.vtt" default>
</video>
</body>
</html>
You can try loading a webm audio file as the src attribute for a video element. Then you can set the length and width attributes of the video element so it looks like a music player. I've done this using the URL.createObjectURL() to play local audio with .vtt files on my drive but I'm not sure about other use cases.

HTML video tag suggestions

I have strange problem, that i can't resolve. I have stream that i have to put in a site. I don't have access to the stream link which is http://94.26.60.47:8880/865tv.mpg
The codec used is mp4. I know that this is strange, but i can't change this link, and i need to put it in a site using HTML5 video tag. I used this code:
<!DOCTYPE HTML>
<html>
<head>
<title>Test Stream</title>
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<video width="320" height="240" controls>
<source src="http://94.26.60.47:8880/865tv.mpg" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
As a result in Chrome i just see empty player. In Mozilla i get more debug info:
HTTP "Content-Type" of "video/mpeg" is not supported. Load of media resource http://94.26.60.47:8880/865tv.mpg failed.
Invalid URI. Load of media resource failed.
What i did, is changing mime.types in my apache conf (restarted after the change) (remove mpg from video/mpeg and add it to video/mp4), and no success.
Any help will be appreciated.
It's clear that you cannot play mpeg1 or mpeg2 using html5. I also was looking into something like that. You could embed a VLC web player that can handle these video formats pretty easily. Maybe consider... https://wiki.videolan.org/Documentation:WebPlugin/
<html>
<title>VLC Mozilla plugin test page</title>
<body>
<center><embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="640" height="480" id="vlc">
</embed></center>
<script language="Javascript">
<!--
var vlc = document.getElementById("vlc");
var id = vlc.playlist.add("http://94.26.60.47:8880/865tv.mpg");
vlc.playlist.playItem(id);
//!-->
</script>
</body>
</html>

Playing audio file using HTML 5 and jsp

I am trying to play an audio file, it works when I have a .html file but when I am running the same code in a .jsp file the file cannot be played. I am using Netbeans IDE. Could someone please point out the mistake, Here is the jsp code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<audio controls>
<source src="C:\Users\Desktop\1.mp3" type="audio/mpeg">
</audio>
</body>
The src attribute should not be the file location of the audio file. Instead, it should be the URL for the file. So in your case, try
<audio controls>
<source src="http://localhost:8080/PathToMp3/1.mp3" type="audio/mpeg">
</audio>
where http://localhost:8080/PathToMp3/1.mp3 is the url of your mp3 file.
<audio controls>
<source src="http://localhost:8080/PathToMp3/1.mp3" type="audio/mpeg">
</audio>
if it's not working use this
<embed src="">