In HTML5 is possible to include audio with a simple tag:
<audio src="anySong.m4a" controls></audio>
Now I try to change the appearance using JavaScript and JQuery but it doesn't work. Can anyone repair my example or propose another very simple way?
Example here: http://jsfiddle.net/T47XQ/5/
HTML:
<audio id="audio" src="http://a3.mzstatic.com/us/r1000/075/Music/35/e5/c6/mzm.pffzpdco.aac.p.m4a">
</audio>
<div id="escolta">escolta</div>
<div id="pausa">pausa</div>
JAVASCRIPT:
$(function(){
$("#escolta").click(function() {
$("#audio").play();
});
$("#pausa").click(function() {
$("#audio").pause();
});
});
CSS:
#escolta,#pausa { font-family: Tahoma;letter-spacing:1px;font-size:11px;color: #6666;width: 80px;text-align: center;height: 20px;line-height: 20px;background-color: #ccc;cursor: pointer;}
#escolta {position: absolute;top: 20px;left: 20px}
#pausa {position: absolute;top: 20px;left: 150px}
use $('id')[0] to get the raw element (http://jsfiddle.net/T47XQ/6/)
Related
I managed to play a vimeo video with an external play button with this code
<div class="myvimeo_container">
<iframe id="vimeovid1" src="https://player.vimeo.com/video/vimeoID" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br>
<button onclick="play_video()">MY_PLAY_BUTTON</button>
<script>
function play_video() {
var player = document.getElementById("vimeovid1");
var data = { method: "play" };
player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script></div>
This is working!
But I'm having trouble to add a second button for pausing the video.
Is there a way to implement a second
<button onclick="pause_video()">MY_PAUSE_BUTTON</button>
<script>
function play_video() {
var player = document.getElementById("vimeovid1");
var data = { method: "pause" };
player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script>
I can't figure this out yet. I just started learning coding and it would be awesome if someone could point me in the right direction.
I'm using the code above in wordpress by the way... to embed a vimeo video... their responsive embedding is not so awesome... so I'm trying to work around a little bit...
Try changing your function name to pause_video, since that's what your button is trying to call.
It looks like this is a simple case that you haven't named your physical function correctly for the pause button.
<button onclick="pause_video()">MY_PAUSE_BUTTON</button>
<script>
function pause_video() { //EDIT: Needed to call the function 'pause_video' to link up to your button
var player = document.getElementById("vimeovid1");
var data = { method: "pause" };
player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script>
If you are looking at making your content more responsive, a really easy way is to do this with bootstrap, take a look at this tutorial.
You'll end up with something like this which handles the fluid videos for you:
<div class="embed-responsive embed-responsive-16by9">
<iframe id="vimeovid1" class="embed-responsive-item" src="https://player.vimeo.com/video/vimeoID" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
If you don't want to use bootstrap then I've used the site embedresponsively.com in the past which prints out your embed in a neat little package something like this:
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/vimeoID' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
If I apply a CSS filter to a video element, for example:
video:first-child {
filter: brightness(40%);
}
<video controls></video> vs.
<video controls></video>
Then I find that the same effect applies to the media controls UI that the browser provides (via controls attribute on the video tag).
Are there any techniques that allow for applying the filter to the video content without the controls being affected?
Don't think this is possible, but you could make your own play/pause buttons etc using javascript, then style the video? Like below:-
(function (window, document, $, undefined) {
'use strict';
$(document).ready(function () {
$('#play').on('click', function(){
$('.my-video')[0].play();
});
$('#stop').on('click', function(){
$('.my-video')[0].pause();
});
});
})(window, document, jQuery);
video {
border: 10px solid green !important;
opacity: 0.6;
box-shadow: 12px 9px 13px rgba(255, 0, 255, 0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<video width="320" height="240" class="my-video">
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<button type="button" id="play">Play</button>
<button type="button" id="stop">Stop</button>
I am using HTML5 video to stream a web camera and I am wondering is it possible to place a logo inside HTML5 video stream?
<div id="streaming">
<video id="webcam" autoplay></video>
</div>
This could be achieved by adding an image element into the html's body section and placing it accordingly (which suits the best for your need) using css.
ᴅᴇᴍᴏ
.logo {
position: absolute;
top: 12px;
left: 18px;
}
<body>
<div id="streaming">
<video id="webcam" src="https://istack.000webhostapp.com/psy.mp4" height="219" autoplay></video>
<img src="https://istack.000webhostapp.com/yt.png" width="40" class="logo">
</div>
</body>
I'm trying to use the <picture> element, which is created by the picturefill js library, inside of a web component I'm creating using Polymer, but it is choosing the smallest possible image as <picture> is not getting any dimensions from the container element.
I have tried giving :host a display:block among a myriad of other atempts at doing this with styling, including making sure the container is 100%, but nothing works.
Here is a codepen of what I'm trying to do showing the polymer-made element using the smallest image, then the <picture> element on it's own showing the correct image.
Note that in the live codepen version that the <hr> (horizontal rule) elements created by the polymer-element are the full width and thus understand the correct width of the container.
This is the code in the codepen:
```
<polymer-element name="picture-container" attributes="value">
<template>
<style>
:host {
display: block;
border: 1px solid #000;
padding: 1em;
}
</style>
<hr>
<h2>Picture In Polymer Element</h2>
<picture>
<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
</picture>
<hr>
</template>
<script>
Polymer('picture-container');
</script>
</polymer-element>
<picture-container></picture-container>
<hr>
<h2>Picture In Polymer Element</h2>
<picture>
<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
</picture>
<hr>
```
any help on this greatly appreciated.
thanks,
Scott
UPDATE
There is a running thread on this on the picturefill github issues section. That thread gave a new option in the script section which made this work correctly in Firefox and Safari:
<script>
Polymer('picture-container',{
ready: function() {
picturefill({elements: this.shadowRoot.getElementsByTagName('img')});
}
});
</script>
Example codepen: http://codepen.io/scottnath/pen/Wboayg
I discovered that in Firefox (33.03) if I go into about:config and change these two settings to true:
dom.image.srcset.enabled
dom.image.picture.enabled
then this mimics the incorrect behavior of chrome for the picture element.
Still no solution though...
I'm trying to display an image over a video (html5). If I put an instead of the video ... it works but when I put a the video is over the image :/ What could I do ?
<div class="videohead">
<video loop="loop" autoplay="autoplay">
<source src="img/video.mp4" type="video/mp4" />
<img src="img/video.png"/>
</video>
<img src="img/logo.png" class="logo"/>
</div>
.videohead
{
margin: 5px 0 0 1px;
}
.logo
{
margin-top: -155px;
}
Link: https://jsfiddle.net/kNMnr/1487/
Use position in CSS3 with z-index.
<div id="wrap_video">
<div id="video_box">
<div id="video_overlays">Logo</div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gKiaLSJW5xI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
#video_box {
position:relative;
}
#video_overlays {
position:absolute;
width:160px;
min-height:40px;
background-color:#dadada;
z-index:300000;
bottom:10px;
left:10px;
text-align:center;
}
you can provide the image with a certain z -index in css and set its position to absolute hope that helps...
Looks like the z-index is the problem here as the other user suggest, but just wanted to add. If you are tring to just display a picture before a video you could also use the poster attibute of the html5 video tag.
http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99
There is a simple video attribute that allows the use of pre-loaded images.
The "poster" attribute defines a poster image that is in place of the video.
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.