how to hide html5 player for ipad on done button click - html

I am playing vide in ipad it is working fine but i want that when user enter done button player should close any idea how to do this. i am using following code.
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<style>
body {margin:0;}
</style>
</head>
<body>
<video width=”1024″ height=”750″ controls=”true”>
<source src=”videos/test.m4v” />
</video>
</body>
</html>

You can find FULL CODE here
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<script>
function onClickDone(){
document.getElementById('myvideotag').pause();
document.getElementById('myvideotag').style.display = "none";
}
</script>
<style>
body {margin:0;}
</style>
</head>
<body>
<button onclick="onClickDone()">Done</button>
<video id="myvideotag" width=”1024″ height=”750″ controls=”true”>
<source src=”videos/test.m4v” />
</video>
</body>
</html>

Related

How to play mp3 after page load?

After creating my demo github pages.
I put following code into the index.html file :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My TITLE</title>
<link rel="icon" type="image/x-icon" href="images/icon.ico">
</head>
<body>
<iframe src="2-seconds-silence.mp3" allow="autoplay" id="audio" style="display: none" hidden=""></iframe>
<audio id="player" autoplay loop>
<source src="hello.mp3" type="audio/mp3">
</audio>
</body>
</html>
However after loading the page by chrome, it didn't run.
Is there any way to fix this?
You can try it like that. Attribute list: https://www.w3schools.com/jsref/dom_obj_audio.asp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My TITLE</title>
<link rel="icon" type="image/x-icon" href="images/icon.ico">
</head>
<body>
<iframe src="2-seconds-silence.mp3" allow="autoplay" id="audio" style="display: none" hidden=""></iframe>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var audioTag = document.createElement("AUDIO");
audioTag.setAttribute("src","hello.mp3");
document.body.appendChild(audioTag);
}, false);
</script>
</body>
</html>
Check this:
<audio src="mysong.mp3" id="my_audio" loop="loop"></audio>
<script type="text/javascript">
window.onload=function(){
document.getElementById("my_audio").play();
}
First grab the audio element using Javascript.
for eg : const audio = document.queryselector("#audioId")
then apply funtion window.addEventListener("load",() => {audio.play()})
correct autoplay attribute. Instead of 'autoplay=" "' just leave 'autoplay', same for 'loop'.
Cheers

HTML Background Music Not Working (Embed Tag)

I am trying to add music to my HTML website, but when I run the code, it doesn't work! Any help is apricated. I have the music in the same directory.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<embed name="22 - Edited" src="22 - EDITED.mp3" loop="false" hidden="true" autostart="true">
<div class="main">
<h1>Crimson</h1>
<hr>
Play
</div>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</head>
<body>
<audio id="myAudio" src="./22 - EDITED.mp3" controls>
<hr>
<audio controls id="myAudio">
<source src="./22 - EDITED.mp3" type="audio/ogg">
<source src="./22 - EDITED.mp3" type="audio/mpeg">
</audio>
</body>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</html>
Auto play:
document.getElementById("myAudio").autoplay;
then hide element audio with css attribute:
audio{
display:none;
}

<picture> tag in HTML5 not working on chrome?

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive HTML sites</title>
</head>
<body>
<picture>
<source srcset="marbled.jpg" media= "(max-width: 600px)">
<source srcset="rolemodel.jpg" media= "(max-width: 1400px)">
<source srcset="supalonely.jpg">
</picture>
</body>
</html>
This is my code and when I run it on chrome, there are no warnings or display. All the images are in the same folder and when I add img before source, it shows all the images, instead of showing it according to device-width
You needed to add an <img> along with the sources. Link to more on <picture>.
Example code below will change image on screen re-size. Hope this helps
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive HTML sites</title>
<style type="text/css">
source, img{
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<picture>
<source srcset="https://9to5google.com/wp-content/uploads/sites/4/2019/03/google-images-material-theme.jpg?quality=82&strip=all&w=1600" media= "(max-width: 600px)">
<source srcset="https://dg.imgix.net/do-you-think-you-re-happy-jgdbfiey-en/landscape/do-you-think-you-re-happy-jgdbfiey-9bb0198eeccd0a3c3c13aed064e2e2b3.jpg?ts=1520525855&ixlib=rails-4.0.1&auto=format%2Ccompress&fit=min&w=700&h=394&dpr=2&ch=Width%2CDPR" media= "(max-width: 800px)">
<img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png">
</picture>
</body>
</html>

Why isn't my page redirecting after video?

Why isn't my page redirecting after the video finishes? Currently, it is live at https://www.eves.website/eve_3.html
After the video finishes, it is supposed to go to https://www.eves.website/eve_4.html
Which is also live. But it just says on eve_3. html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>eve_</title>
<link rel="icon" rel="preload" href="images/evecircle.png" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myVideo").bind('ended', function(){
location.href="https://www.eves.website/eve_4.html";
});
});
</script>
</head>
<body>
<video id="myVideo" style="margin-left:-10px; margin-top:-10px;" width="105%" height="105%" autoplay>
<source src="images/human.mp4" autoplay="true" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
Try this one...
$(document).ready(function(){
$("#myVideo").bind('ended', function(){
window.location.href="https://www.eves.website/eve_4.html";
});
});
It was because it wasn't secure, therefore it wasn't allowing me to redirect to another site.

Is it possible to use YouTube video with HTML video tag?

I'm making website and I need to add video, but not using iframe. Video tag doesn't have this ability I guess, maybe there are some simple alternatives?
Have you tried this code ?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>HTML5 MediaElement - YouTube</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mediaelementjs.com/js/mejs-2.13.1/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://mediaelementjs.com/js/mejs-2.13.1/mediaelementplayer.min.css" />
</head>
<body>
<h1>MediaElementPlayer.js</h1>
<h2>YouTube Wrapper</h2>
<video width="640" height="360" id="player1">
<!-- Pseudo HTML5 -->
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
<span id="player1-mode"></span>
<script>
$('video').mediaelementplayer({
success: function(media, node, player) {
$('#' + node.id + '-mode').html('mode: ' + media.pluginType);
}
});
</script>
</body>
</html>
More info at http://mediaelementjs.com