I'm having some issues with video for mobile and HTML5. My biggest problem is that the video will play like 2 seconds and stop because not enough of the video has loaded. The video is 1:26s long and 9mb. I was testing on wifi. Is there a way that I can make the video wait til enough has loaded so it can play without issues? or what is my best option to help solve this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
</script>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
-->
</style>
</head>
<body>
<!--<div id = "m_loader">
<div id = "loading_hold">
<img src="d_logo.png" width="365" height="500" />
</div>
</div>-->
<video controls="controls" autoplay="autoplay">
<source src="reel720_3.mp4" type="video/mp4" />
<source src="reel720_3.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
You can use the "canplaythrough" event. Though you may want to show some sort of progress/download indicator while this is happening.
myVideo.addEventListener('canplaythrough', function() {
myVideo.play();
});
Related
this is my html code, its work but with no sound!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo" width="320" height="240" >
<source src="https://4.top4top.net/m_1348rq2js1.mp4" type="video/mp4">
</video>
</body>
</html>
i want it play with full sound volume and full screen
can anyone help?
thanks.
How come google chrome can play the following video:
http://www.w3schools.com/html/mov_bbb.mp4
But not when I try to do it myself?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<video width="500" height="300" controls autoplay>
<source src="Videos/SampleVIDEO1.mp4" type="video/mp4">
Your browser doesn't support video, you may download the video instead: Click.
</video>
</body>
</html>
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
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>
I cannot for the life of me get the audio tag to work in IE9. Here is my code, what exactly am I doing wrong? I made sure my tags were all in order and I put an exception in to force IE9 to use HTML5. Thanks in advance for your help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CD Cover Animation</title>
<script type="text/javascript" src="js/animCD.js?rev=new"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- Show Audio when button is clicked -->
<script type="text/javascript">
function showAudio()
{
document.getElementById('audioInterview').style.visibility='visible';
}
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<video autoplay="autoplay" id="videoBackground" width="1280" height="720" preload="auto" ontimeupdate="animCD_onprogress();">
<source id="colorVid_mp4" type="video/mp4" src="img/luther-2.mp4">
<source id="colorVid_ogg" type="video/ogg" src="img/luther-2.ogg">
</video>
<audio id="audioInterview" preload='auto' controls style="visibility:hidden"
<source src="audio/interview.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<!-- <div class="buttonSkip" onclick="alert('Clicked Skip');"></div> -->
<p><a class="ex2" href="http://www.lrltv.org/muslims-nuclear.html">[ skip intro]</a></p>
<div id="buttonPlacement" class="buttonPlacement">
<div onclick="showAudio();" class="btnDonate"></div>
<div onclick="alert('Clicked Buy');" class="btnBuy"></div>
</div>
<!-- Add more buttons here -->
</body>
</html>
Like the comments say, you need to close the audio tag. But that they don't mean the </audio> but the > at the end of the line. It should look like this:
<audio id="audioInterview" preload="auto" controls="controls" style="visibility:hidden">
<source src="audio/interview.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
I also use the controls="controls".
If you don't need to show the audio control, you also do this in pure JavaScript.
var audioInterview = new Audio('audio/interview.mp3');
audioInterview.play();
And then remove the HTML audio tag.