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
Related
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.
I am using the below code in order to display a video in my website:
<div class="item video-one">
<video id="f-video" class="slide-video slide-media" autoplay="true" loop="" muted="" preload="metadata">
<source src="http://myweb.com/name.mp4" type="video/mp4">
</video>
</div>
The code works properly in all devices except iPhones (safari). I have seen that this issue had happened to other people as well but I haven't found a solution.
Do you know if there is a fix or shall I just find another solution to my problem? (maybe hide the video)
Thank you
You can find the recommended settings for WebKit, which iOS uses, and notes on iOS here: https://webkit.org/blog/6784/new-video-policies-for-ios/
Using their example, the below will play on iPhone (tested on iPhone 7 running iOS 13.3.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple iOS Video Test</title>
</head>
<body>
<h1>Video Test</h1>
<video autoplay loop muted playsinline>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
</video>
</body>
</html>
Modifying the above to use your HTML5 and the same view as above also works - tested on the same test device:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple iOS Video Test</title>
</head>
<div class="item video-one">
<video id="f-video" class="slide-video slide-media" autoplay="true" loop="" muted="" preload="metadata">
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
</div>
</html>
So your HTML is working. You may find the issue is with your video format - this is a common cause of video not playing from one device to another.
the issue was fixed by adding playsinline inside the video tag.
<video id="f-video" class="slide-video slide-media" autoplay="true" loop muted playsinline preload="metadata">
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.
Below is the html code which i am using to play videos in my video folder using video.js link
<!DOCTYPEs>
<html>
<head>
<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
</head>
<body>
<video id="sample" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
data-setup="{}">
<source src="/video/video1.mp4" type='video/mp4' target="_blank"/>
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
</body>
</html>
You didn't write in what browser are you trying to make the code work. Is it possible that your browser doesn't support the video format? Chrome supports .mp4, but for example Firefox doesn't, it supports .webm.
You can read more about this in the WebPlatform Docs
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.