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.
Related
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/
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
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>
Apparently I'm a total noob when it comes to web development. I just need help making a simple html file that embeds a video. I can't use youtube. I just need to embed the local file and it's not working.
<!DOCTYPE html>
<head>
<title>Testing</title>
</head>
<body>
<video id="0" controls width="502" height="479">
<source src="OWA tutorial.webm" type='video/webm'>
<source src="OWA tutorial.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
</body>
</html>
This doesn't work. "OWA tutorial.mp4" is in the same folder as the html file. What am I doing wrong?
Tried this:
<!DOCTYPE html>
<head>
<title>Testing</title>
</head>
<body>
<video id="0" width="502" height="479" controls>
<source src="loop.ogv" type="video/ogg">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
</body>
</html>
Worked well. Just replace the ogg with mp4, in your case.
Edit:
I'm not saying that you should use .ogv instead of .mp4.
I just used it as example because I've tried with a .ogv file (just because I don't have a .mp4 file here right now).
Your code should work if you copy mine and just replace the "loop.ogv" with your filename and the "video/ogg" with "video/mp4".
Sorry if it was misleading.
I am trying to make an audio player using HTML 5 project template. I am using the following HTML code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
<title>Windows Phone</title>
</head>
<body>
<div>
<p>Audio Player</p>
</div>
<div id="page-title">
<p>Play Audio</p>
<audio controls="">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
I picked up this code from here, I have added the "horse.ogg" to the solution explorer as shown in the screenshot below...
But when I run this appication I get the following output, it reads
Invalid Source
But when I open the same html using a browser I am able to play the file properly.
What could be the problem ?
Is there a better and easier way in which I could play audio files which I will add to the solution explorer and play using HTML 5 ? I am planning to add 10-15 small and funny audio clips and the app will allow user to select it and play it using HTML 5.
Please share your thoughts on this.
As the error message says, it's an invalid source.
Internet Explorer 10 doesn't support Ogg audio files, but MP3 files. Convert your Ogg to an MP3 and it should work fine.
<audio controls>
<source src="horse.mp3" type="audio/mp3">
</audio>
Also, if you're only providing one source you can use the src attribute of the audio element:
<audio src="horse.mp3" controls></audio>
But this is only really recommended if you are targetting one particular type of browser only.