Any suggestion on how can I apply such effect?
Using drawImage method on canvas element doesn't work for me because Safari IOS doesn't support video element as a source for drawImage.
Add two video elements - one on top of the other. The bottom one zoomed to fill and with a CSS blur filter applied, the top one scaled to fit with no blur.
#fg {
position: absolute;
top: 50px;
left: 100px;
}
#bg {
position: absolute;
top: 0;
left: 0;
filter: blur(20px);
}
div {
position: relative;
overflow: hidden;
width: 400px;
height: 220px;
}
<div>
<video id="bg" width="400" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<video id="fg" width="200" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
</div>
Related
i posted this type of code earlier, but i'm posting it again in hopes of trying to figure out what to do for the javascript. i'm in a creative coding class trying to create a "useless website." kind of like what you see in https://theuselessweb.com/
the idea is that when you submit a file, theres a chance that there would be a video of knuckles from sonic questioning, accepting or denying the file.
i'm having trouble trying to figure out how to include a file insert into an if statement, to then create the random number generator. I'll post my code below, anything helps!
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Useless Website</title>
<meta charset="UTF-8">
<meta name="description" content="A website that lets you insert a photo/video, and then knuckles from the sonic series approves, denies or questions your work or -meme- ">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--contains all HTML-->
<div class="container">
<!--text above video-->
<div class="header">
<h1>Get your Meme Approved!</h1>
<h2>By Knuckles himself.</h2>
<p>An "Introduction to Programming Concepts" coding project by Megan Kingston. Professor is Adam Thomas at Humber College.</p>
</div>
<!--where you insert your meme-->
<div class="insert" id="insert">
<label for="myfile">Place Meme Here:</label>
<input type="file" id="myfile" name="myfile">
</div>
<!--video options, under header (technically will be one video)-->
<div class="video" id="video">
<div class="meme-approved" id="meme-approved">
<video width="640" height="480" controls>
<source src="knuckles-videos/meme-approved.mp4" type="video/mp4">
<source src="knuckles-videos/meme-approved.mp4" type="video/ogg">
</video>
</div>
<div class="meme-denied" id="meme-denied">
<video width="640" height="480" controls>
<source src="knuckles-videos/meme-denied.mp4" type="video/mp4">
<source src="knuckles-videos/meme-denied.mp4" type="video/ogg">
</video>
</div>
<div class="meme-questionable" id="meme-questionable">
<video width="640" height="480" controls>
<source src="knuckles-videos/meme-questionable.mp4" type="video/mp4">
<source src="knuckles-videos/meme-questionable.mp4" type="video/ogg">
</video>
</div>
</div>
</div>
<script>
// videos are invisible
var element = document.getElementById("meme-approved"); // get element 1
element.style.visibility = "hidden";
var element = document.getElementById("meme-denied"); // get element 2
element.style.visibility = "hidden";
var element = document.getElementById("meme-questionable"); // get element 3
element.style.visibility = "hidden";
const meme = document.getElementById("insert"); // defining file insert button
var inputArray = ['meme-approved', 'meme-denied', 'meme-questionable'];
for (let i = 0; i < inputArray.length; i++)
{
element += inputArray[i] + "<br>";
}
</script>
</body>
</html>
CSS CODE:
.body {
margin: 0;
}
/* HEADER DESIGN */
.header {
font-family: sans-serif;
background-color: antiquewhite;
text-align: center;
}
.header p {
font-size: 8pt;
color: grey;
}
/* VIDEO DESIGN */
.video {
text-align: center
}
.meme-approved {
position: relative;
top: 0;
left: 0;
}
.meme-denied {
position: relative;
bottom: 485px;
left: 0px;
}
.meme-questionable {
position: relative;
bottom: 970px;
left: 0px;
}
/* FILE INSERT DESIGN */
.insert {
background-color: antiquewhite;
text-align: center;
font-family: sans-serif;
}
That title is quite confusing, I know.
So briefly, I have 5 videos and want them all to use js to play AND pause them individually onclick.
Each video has a different class, but I've given them all a second class to group them together. (to my knowledge)
my js :
var myVideo = document.getElementByClassName("videos");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
my html: (all 5 videos are idential html except the id's)
<div class="video1">
<video id="video1" class="videos video1" width="500" height="303" onclick="playPause();">
<source src="hlace.mp4" type="video/mp4">
<source src="hlace.ogg" type="video/ogg">
</video>
</div>
I've used .getElementById and the js has worked for the video which Id I used. But now I want to apply it for all the videos and I'm stumped.
https://jsfiddle.net/jomot/1jvq1myf/
You can do something like below -
Your js fiddle code has many errors due to the videos and the main error is -
This
var myVideo = document.getElementByClassName("videos");
should be changed to
var myVideo = document.getElementsByClassName("videos");
The below code will give you an idea of what you need to do. You can simply pass this.id to playpause() function. This way it will only work on the div that is clicked and not on others. By doing this, there is no need to group the elements that you have done in your code by giving the same css class to all div elements.
Hope this helps!
function playPause(id) {
var divId = document.getElementById(id);
if (divId.getAttribute('status') == 'paused') {
divId.setAttribute('status', 'play');
divId.play();
}
else{
divId.setAttribute('status', 'paused');
divId.pause();
}
}
.responsive {
padding: 0 6px;
width: 24.99999%;
margin-left: 20%;
}
#media only screen and (max-width: 1700px){
.responsive {
width: 49.99999%;
margin-left: 5%;
}
}
#media only screen and (max-width: 1200px){
.responsive {
width: 24.99999%;
margin-left: 2%;
}
}
div.video1 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video2 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video3 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video4 {
margin-left: 26%;
margin-bottom: 1%;
display: inline-block;
}
div.video5 {
margin-left: 26%;
margin-bottom: 10%;
display: inline-block;
}
<div class="background">
<div class="transbox">
<hr>
<h2> Highlights </h2>
<hr>
<div class="responsive">
<div class="video1">
<video id="video1" class="videos video1" status="paused" width="500" height="303" onclick="playPause(this.id);">
<source src="hlace.mp4" type="video/mp4">
<source src="hlace.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video2">
<video id="video2" class="videos video2" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hldustace.mp4" type="video/mp4">
<source src="hldustace.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video3">
<video id="video3" class="videos video3" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hlflick.mp4" type="video/mp4">
<source src="hlflick.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video4">
<video id="video4" class="videos video4" status="paused" width="500" height="300" onclick="playPause(this.id);">
<source src="hlmirage.mp4" type="video/mp4">
<source src="hlmirage.ogg" type="video/ogg">
</video>
</div>
</div>
<div class="responsive">
<div class="video5">
<video id="video5" class="videos video5" status="paused" width="500" height="300" onclick="playPause(this.id)">
<source src="hlreel.mp4" type="video/mp4">
<source src="hlreel.ogg" type="video/ogg">
</video>
</div>
</div>
</div>
</div>
Thanks
Allright for a project I need to have a centered image (a play button) rendered at runtime on top off a video depending on the UserAgent. If the userAgent isn't Firefox I want to display the image since Firefox has it's own playEvent and button on top of the video at start. All my previous attempts to do so have failed.
I tried:
tag in the video tag and put the z-index to 10 while putting video z-index to 1
Putting a div with a background image around the video tag
Are there any other ways to do this, and please don't reply use a poster since I allready have a poster I need to use.
-EDIT-
Code:
<tr>
<td runat="server" width="680px" height="383px" id="vContainer">
<video id="player" style="z-index: 1" width="100%" height="100%" title="" controls runat="server">
<source runat="server" id="ffVideo" type="video/ogg" />
<source runat="server" id="mp4Video" type="video/mp4" />
</video>
<embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px" title="" style="display: none" type="application/mp4" runat="server" />
</td>
</tr>
As simple as put a tag and give it more z-index. You can make it running: http://jsfiddle.net/65rda3jq/
<div class="cont">
<div class="img"></div>
<video id="player" style="z-index: 1" width="100%" height="100%" title="" controls
runat="server">
<source runat="server" id="ffVideo" type="video/ogg" />
<source runat="server" id="mp4Video" type="video/mp4" />
</video>
<embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px"
title="" style="display: none" type="application/mp4" runat="server" />
</div>
CSS
.cont {
position:relative;
}
video { position: relative; }
.img {z-index:10; background: #f00; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; }
Try this one:
html:
<div class="cont">
<div class="img"><span class='play_icon'></span></div>
<video id="player" style="z-index: 1" width="100%" height="100%" title="" controls
runat="server">
<source runat="server" id="ffVideo" type="video/ogg" />
<source runat="server" id="mp4Video" type="video/mp4" />
</video>
<embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px"
title="" style="display: none" type="application/mp4" runat="server" />
</div>
CSS:
.cont {
position:relative;
background:rgba(42,42,42,0.9);
border:none;
color:#fff;
outline: none;
}
.play_icon{
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 36px solid #fc8b02;
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
video { position: relative; }
.img {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 10%;
height: 16%;
cursor: pointer;
border-radius: 5px;
background: rgba(0,0,0,0.6);
}
http://jsfiddle.net/Grald/kgwvupjm/
I am having trouble with this and need help! I am trying to use a video as a background and then put text and images on top of it in a div.
Here is what I have so far:
<section id="VideoSection>
<div id="VideoText">Testing 123</div>
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="movie.mp4" type="video/webm">
</video>
</section>
And this is my CSS:
video#bgvid {
z-index: -2;
}
#VideoText{
position: absolute;
z-index: -1;
}
-DEMO-
<section id="VideoSection">
<div id="VideoText">Testing 123</div>
<video id=bgvid autoplay muted poster="http://media.w3.org/2010/05/bunny/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</section>
Css:
video#bgvid {
z-index: -2;
}
#VideoText{
position: absolute;
z-index: 1;
}
then add position:relative; to #VideoSection so that you will be able to use position absolute on the text
#VideoSection{
position:relative;
}
-Demo-
Try to give position:relative to parent element and give position:absolute to child and then give top or left value. check the DEMO.
section#VideoSection{position:relative;}
video#bgvid
{
position: absolute;
z-index: 0;
top:0;
left:0;
}
#VideoText{
position: absolute;
z-index: 1;
top:12px;
}
So this is what i tried so far:
<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;">
<video width="520" height="390" style="z-index:-10;">
<source src="m/video.ogv" type="video/ogg">
<source src="m/video.mp4" type="video/mp4">
</video>
</div>
I have a fixed menu and when the menu is over the video , the video just seem to ignore the z-index. Im currently working on chrome windows with no luck. Any ideas?
Use css position:absolute property to both elements which overlaps and try to give values higher than 0 to the z-index
Here is working jsFiddle example.
css:
#main_container { float: left; position: relative; left:0; top:0; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
z-index: 9998; }
html:
<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
Note: Used overlay div for deactivate controls and you can use whatever content on your video, like in jsFiddle example.
Source: Video as background on a website playing on command
On your overlay/menu element, use:
backface-visibility: hidden;
This worked for me. My guess is that it triggers 3d rendering on the element, which eliminates the z-index problem.
The overlay also needs to be a sibling of the video.
It will not work if the video is a child of the overlay.
Works:
<div id="container">
<div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
</div><!-- end #overlay -->
<video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div><!-- end #container -->
Dosen't Work:
<div id="container">
<div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
<video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div><!-- end #overlay -->
</div><!-- end #container -->
I've only tried this in Chrome so apologies if this isn't universally true.