I am doing some audio support testing for my company's audio player, and am displaying a series of HTML5 Audio players to see which of our available formats are supported through a simple HTML5 Audio Player. The format here is not in question, just an explanation of what I'm doing.
The players display as they should on Windows Chrome, Firefox and IE11, on Mac Chrome, Firefox and Safari, on Android Internet, Chrome and Firefox... but when it comes to iPad and iPhone, this is where the Twilight Zone episode begins.
All that is visible in each Audio element, is the PLAY button, and the AirPlay control (if available). I have looked all over the web, and everyone says that if you make the elements wide enough, the time scrub and volume should just show up. I have the players stretching the entire width of the page, and still nothing.
Here is my HTML and CSS
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AUDIO TESTS</title>
</head>
<body>
<div class="player">
<h3>AIFF 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Track01.aiff" type="audio/aiff">
</audio>
</div>
<div class="player">
<h3>AIFF 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Track29.aiff" type="audio/aiff">
</audio>
</div>
<div class="player">
<h3>M4A 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="35027823.m4a" type="audio/mp4">
</audio>
</div>
<div class="player">
<h3>M4A 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="DefyingGravitywinds.m4a" type="audio/mp4">
</audio>
</div>
<div class="player">
<h3>MP3</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="35027822.mp3" type="audio/mpeg">
</audio>
</div>
<div class="player">
<h3>WAV 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Aboveallhigh.wav" type="audio/wav">
</audio>
</div>
<div class="player">
<h3>WAV 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="holygourndhigh.wav" type="audio/wav">
</audio>
</div>
<div class="player">
<h3>WMA</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="A8526.wma">
</audio>
</div>
</body>
</html>
CSS
body {
wwidth: 100%;
height: 100%;
background: #ff0000;
font-size: 100%;
font-family: Arial, sans-serif;
color: #333;
margin: 10px 0;
text-align: center;
}
.player{
width: 75%;
height: auto;
display: block;
margin: 5px auto;
border-radius: 3px;
background-color: rgba(0,100,0, 1);
border: 1px solid #333;
padding: 10px;
}
.player:hover {
background-color: rgba(0,100,0, 0.4);
}
.player h3 {
padding: 0;
margin: 0 0 10px;
}
audio {
width: 100%;
height: 100px;
display: block;
margin: 0;
}
Again, I am asking WHY can't I get the controls to fully show up on iPad and iPhone. This is not an audio format support question.
Here's a screenshot of WHAT my iPad is showing;
It seems like controls are showing up, just not the same controls as used in HTML5 on a computer. You can see the play/pause button just not the current location slider.
I had a similar issue and the problem seems to only occur if the audio player is not wide enough. Try a higher width (our flipping your phone in landscape) to determine if its a width issue or a controls boolean issue. Unfortunately I wasn't able to find a way to force the controls and ended up having to make the audio player wider.
Related
I want to display two videos with different dimensions in the same row. I'm trying to automatically adjust the height so that there are no weird gaps (like in image 1).
IMAGES: https://imgur.com/a/mK2nIKy
I've tried out things with flex display but with no success.
My current set-up is:
<div class="row">
<div class="col-sm block-element-left">
<video class="rc" autoplay="autoplay" loop="loop" muted="muted" playsinline>
<source type="video/mp4" src="video1.mp4">
</video>
</div>
<div class="col-sm block-element-right">
<video class="rc" autoplay="autoplay" loop="loop" muted="muted" playsinline>
<source type="video/mp4" src="video2.mp4">
</video>
</div>
</div>
<style>
.block-element-right {
padding-left: 10px;
}
.block-element-left {
padding-right: 10px;
}
.rc{
-moz-border-radius:20px;
border-radius:20px;
overflow:hidden;
cursor: pointer;
z-index: -1;
width: 100%;
}
.col-sm {
padding: 0%;
position: relative;
}
</style>
```
Try to set the width and height inside video-tag
<div class="col-sm block-element-left">
<video width="420" height="340" autoplay="autoplay" loop="loop" muted="muted"
playsinline>
<source src="movie.mp4" type="video/mp4">
</video>
</div>
How could I add a title to the top left of video like a YouTube video?
<video id="my-video-stream" controls="" width="320" height="240">
<label id="title">My cooooool label</label>
<source src="video/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
May be you can place the container to wrap the video and label and then we can achieve this.
.video-container {
position: relative;
}
.title-label {
position: absolute;
z-index: 9;
color: blue;
margin-top: 5px;
margin-left: 5px;
}
<div class="video-container">
<label class="title-label">My cooooool label</label>
<video id="my-video-stream" controls="" width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
I having been trying for days now to move a video on top of a <div> which includes an <img>
Effectively I am trying to make the image of a TV show a video on its screen.
Could somebody help me in positioning the video so it is central to the image inside the screen. I can't even get the video to position on top of the <img> let alone making it the correct size and centering it.
Thanks in advance. Much appreciated.
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="videogallery">
<div class="row">
<div class="col-xs-12">
<img class="img-responsive" src="img/TVWALLTWO.jpg">
<video controls="" height="330" width="440">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
</video>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
</div>
.videosheading {
color: #E3A750;
text-align: center;
}
.videogallery {
height: auto;
}
video {
background-color: red;
z-index:-1;
position:relative
}
To center the video over the responsive image, you need a container that has position: relative, than the video must have position: absolute. Look at the snippet bellow, hope you get the idea:
.video-cell {
positon: relative;
}
.video-cell img {
width: 100%;
}
.video-cell video {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="videogallery">
<div class="row">
<div class="col-xs-12 video-cell">
<img class="img-responsive" src="https://placehold.it/880x660">
<video controls width="440" height="330">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</div>
</div>
Also on JSFiddle.
Can someone please help! How to insert caption over the intro video: www.idxforrealestate.com
The code we have is:
<div class="holder">
<video width="100%" height="auto" autoplay loop>
<source src="http://idxforrealestate.com/video/miami-beach.mp4" type="video/mp4">
</video>
</div>
This is if you want the caption over your video.
HTML:
<div class="holder">
<div id="text_some">Some kind of caption</div>
<video width="100%" height="auto" autoplay loop>
<source src="http://idxforrealestate.com/video/miami-beach.mp4" type="video/mp4">
</video>
</div>
CSS:
.holder{
position:absolute;
z-index:0;
}
#text_some{
position:absolute;
z-index:1;
width: 100%;
height:auto;
text-align: center;
color:white;
font-size: 5vw;
top: 40%;
}
jsFiddle - https://jsfiddle.net/tax42nar/
Need Help on adding text on top of, so the text is overlaying an HTML 5 Video, And I also need to add a form inputs and buttons as well below is my HTML5 Video Code.
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Surely you are looking for more than this:
<div class="container">
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
<div class="overlay">
<p>Content above your video</p>
<form>
<p>Content Below Your Video</p>
<label for="input">Form Input Label</label>
<input id="input" name="input" value="" />
<button type="submit">Submit</button>
</form>
</div>
</div>
If you want to put the content on top of the video, you would use some kind of positioning:
.container { position:relative; }
.container video {
position:relative;
z-index:0;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}
You can use top and left position to be in percentage. as it will auto adjust top text when the window content size will change
<div class="container">
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
<div class="overlayText">
<p id="topText">Content above your video</p>
</div>
</div>`enter code here`
#overlayText {
position:absolute;
top:30%;
left:20%;
z-index:1;
}
#topText {
color: white;
font-size: 20px;
align-self: center;
}