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">
Related
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 the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video width="400" autoplay>
<source src="../Videos/mov_bbb.mp4" type="video/mp4">
<source src="../Videos/mov_bbb.ogg" type="video/ogg">
<source src="../Videos/mov_bbb.webm" type="video/webm">
Your browser does not support autoplay HTML5 video tag.
</video>
<p><span>Video courtesy of </span>Big Buck Bunny</p>
</body>
</html>
Upon opening the file in Firefox everything is working as expected.
But, upon opening the file in Chrome or Opera a still image is coming and nothing is happening.
Why is it so?
I am using Ubuntu 18.04
A bit of a workaround. Adding the following after the closing /video tag could work.
<script>
document.getElementById('vid').play();
</script>
Does that work for you?
EDIT: After some extra digging I stumbled across this post https://stackoverflow.com/a/42414858/6524598. It seems to be the case that chrome only respects autoplaying of a video if the audio of it is muted. This would mean that the following would perhaps work for you as well:
<video width="400" autoplay muted >
<source src="../Videos/mov_bbb.mp4" type="video/mp4">
<source src="../Videos/mov_bbb.ogg" type="video/ogg">
<source src="../Videos/mov_bbb.webm" type="video/webm">
Your browser does not support autoplay HTML5 video tag.
</video>
I am trying to get a video to play locally but it isn't working. the file is 'wildlife.mp4,' however, it doesn't play it is just a blank video box? Any help will be much appreciated, thanks.
<!DOCTYPE html>
<html>
<head>
<title>video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="wildlife.mp4" type="video/mp4">
<source src="wildlife.ogg" type="video/ogg">
Your browser does not support the video tag.
</body>
</html>
Video tag is not closed.
Add autoplay if you want the video to play automatically.
<!DOCTYPE html>
<html>
<head>
<title>video</title>
</head>
<body>
<video width="320" autoplay="autoplay" height="240" controls>
<source src="wildlife.mp4" type="video/mp4">
<source src="wildlife.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
If you are running the script on Windows the browser can check the file type associated with the video ( wildlife.mp4 ). On my system ( W7) I clicked the -Properties- on the video file and CHANGed the -Type of file- from VLC (which is the default on my system) to Windows Media player and all was sorted.
Hope this helps.
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
Im new to HTML 5 and learning from w3schools
I tries to get the html video code working for a file I have. Trouble is that the html only works in safari but not the other browsers I have.
Any ideas please?
thanks
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="candonjoel.mp4" type="video/mp4" />
<source src="candonjoel.webm" type="video/webm" />
<source src="candonjoel.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>
Does candonjoel.webm exist? Can you show the URL of your code please?
https://github.com/kaihendry/recordmydesktop2.0/ is project to make screencasts easier from Linux to all browsers.