My video.js controls are not showing in the video but outside the video with lot's of unnecessary options as shown in the screenshot below.
My code is like this:
{% block content%}
<style>
#video-js {
max-width:auto;
width:auto;
max-height:auto;
height:auto;
margin:auto;
padding:auto;
background-color: #343A40;
}
</style>
<video
id="video-js"
class="video-js vjs-custom-skin"
controls
preload="auto"
width=""
height=""
data-setup=""
autoplay
>
<source src="http://url.m3u8" type="application/x-mpegURL" />
<source src="http://url.flv" type="video/x-flv" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<br>
<br>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="https://unpkg.com/browse/#videojs/http-streaming#2.6.0/dist/videojs-http-streaming.js"></script>
{% endblock %}
How can I have these weird controls be gone and just have normal in video controls like play, pause, mute, volume up/down.
You need to add the Video.js styles, https://vjs.zencdn.net/7.10.2/video-js.css
Also, while it's not the cause of the problem, including http-streamimg is redundant. It's included in Video.js 7+.
After adding the Video.js styles mentioned above, you
should then be able to eliminate, re-arrange controls and tweak coloring,
by adding lines like these:
<!-- Change ordering "current-time / duration" to appear on control-bar: -->
<!-- See: https://github.com/videojs/video.js/issues/2507 -->
<style>
.video-js .vjs-current-time { display: block; }
.video-js .vjs-time-divider { display: block; }
.video-js .vjs-duration { display: block; }
.video-js .vjs-remaining-time { display: none; }
.video-js .vjs-load-progress{display: inline-block; background: PaleGreen; height: 8px; width:100%; }
.video-js .vjs-play-progress{display: inline-block; background: LightCoral; height: 8px; width:100%;}
.video-js .vjs-picture-in-picture-control { display: none; }
# (These with leading "#" sign are 'commented-out'...are present here just so the NAMES of various entities are avail for experimenting.)
#.video-js .vjs-progress-holder { margin-left: 0px; margin-right: 0px; background: Blue; }
#.video-js .vjs-loading-spinner{display: block;}
#.video-js .vjs-progress-holder .vjs-play-progress { display: none; }
</style>
Hope these help...
Related
On my web page, I would like to put a video using .js. This video has a background image with a play button. When the user hovers it, automatically the video play. When the user removes the cursor from the video, the video load.
I would like to make the background image appears, right after the user removes the cursor from the video. (Video is still loading)
Do you have any idea?
Here's the code :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videosList">
<div class="video">
<video class="thevideo" loop="" preload="none">
<source
src="https://www.foldfactory.com/resources/sites/223_site/assets/video-
thumb-star-iron-cross.mp4" type="video/mp4">Your browser does not
support the video tag.</video>
</div>
<p>Passez votre curseur ;)</p>
</div>
<style type="text/css">
#videosList {
width: 100%;
height: auto;
overflow: hidden;
margin: auto;
display: block;
}
.video {
background-image: url('https://image.noelshack.com/fichiers/2018/31/2/1533030900-star-
iron- cross.png');
width: 480px;
height: 270px;
margin-bottom: 50px;
}
video::-webkit-media-controls {
display: none !important;
}
</style>
<script type="text/javascript">
var figure = $(".video").hover(hoverVideo, hideVideo);
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).load();
}
</script>
Kind regards.
Are you looking for something like this:
var figure = $(".video").hover(playVideo, hideVideo);
function playVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).load();
}
#videosList {
width: 100%;
height: auto;
overflow: hidden;
margin: auto;
display: block;
}
/*Add the background here*/
#videosList {
background-image: url('https://picsum.photos/480/270');
width: 480px;
height: 270px;
margin-bottom: 50px;
}
/*Hide the video container by default*/
#videosList .video {
display: none;
width: 480px;
height: 270px;
}
/*Show the video container on hover*/
#videosList:hover .video {
display: block;
}
video::-webkit-media-controls {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videosList">
<div class="video">
<video class="thevideo" loop="" preload="none">
<source src="https://code-love.tk/video/protest.mp4" type="video/mp4">Your browser does not support the video tag.</video>
</div>
</div>
<p>Passez votre curseur ;)</p>
My point is: you can get what you want by using CSS (the display property).
Please excuse me i have a very basic question as i am still getting hands on Jquery.
I am trying to load another .html page on click of any figure element in this .html page but script tag is not working as expected can anyone help with the below js
html code:
$(document).ready(function(){
$("figure").click(function(){
$(this).load("singlevideo.html");
});
});
* {
padding:0px;
margin:0px;
}
body {
margin:0;
padding:0;
height:100%;
}
header {
background: green;
color: white;
padding: 8px 0px 6px 40px;
height: 50px;
}
.navbar.navbar-inverse.navbar-fixed-top {
background-color: green; /* fallback color, place your own */
font-weight: 400;
color: white;
text-decoration: none;
}
header h1 {
display: inline;
font-family: 'Oswald',sans-serif;
font-weight: 400;
font-size: 32px;
float: left;
margin-top: 0px;
margin-right: 10px;
}
nav ul{
display: inline;
padding: 0px;
float: left;
}
nav ul li{
display: inline-block;
list-style-type:none;
color: white;
float: left;
margin-left: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
#nav {
font-family: 'Montserrat', sans-serif;
position: fixed;
}
.homered{
background-color: red;
padding: 30px 10px 30px 10px;
}
.homeblack:hover{
background-color: blue;
padding: 30px 10px 30px 10px;
}
div{
width:250px;
height:666px;
background:#1A8DA9;
}
div a{
text-decoration:none;
color:white;
padding:20px;
padding-right:100px
}
div ul li{
list-style-type:none;
display:block;
padding :15px;
border-bottom:1px solid #236D7F;
}
div ul li :hover{
background:#4097AD;
transition:linear all 0.40s;
margin-left:10px;
}
div ul li a:hover{
color:black;
}
#navBar {
float: left;
position: fixed;
}
#nav {
float: right;
}
#maincontent{
width: 80%;
height: auto;
outline: 1px solid;
position: absolute;
right: 0;
background: white;
}
figure {
display: inline-block;
}
}
figure figcaption {
text-align: center;
}
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
.footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:green;
text-align: center;
}
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Videos</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="videos.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<h1> Main logo </h1>
<ul id="nav">
<li><a class="homeblack" href="index.html">Home</a></li>
<li><a class="homered" href="videos.html">Videos</a></li>
<li><a class="homeblack" href="news.html">News</a></li>
<li><a class="homeblack" href="contactus.html">Contactus</a></li>
</ul>
</nav>
</header>
<div id="navBar">
<ul>
<li>video </li>
<li>video </li>
<li>video </li>
<li>video </li>
</ul>
</div>
<div id="maincontent">
<figure id="1">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
<figcaption> Trailer </figcaption>
</figure>
<figure id="2">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
<figcaption> Trailer</figcaption>
</figure>
<figure id="3">
<iframe width="300" height="240" src="https://www.youtube.com/embed/_fL4RuPcDw4" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer </figcaption>
</figure>
<figure id="4">
<iframe width="300" height="240" src="https://www.youtube.com/embed/7yxNzMhXSr4" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer </figcaption>
</figure>
<figure id="5">
<iframe width="300" height="240" src="https://www.youtube.com/embed/ljuBWvzZtyc" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer</figcaption>
</figure>
<figure id="6">
<iframe width="300" height="240" src="https://www.youtube.com/embed/2ZBHa9gIOp4" frameborder="0" allowfullscreen></iframe>
<figcaption>Trailer</figcaption>
</figure>
</div>
<div class="footer">
<p style="color:white; font-size:20px; font-weight:bold;">Copyright © Education Students</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
you can make use of the .load function, not to be confused with the load event handler.
.load() can be used to load data to an element - here's a reference http://api.jquery.com/load/
here's a basic example of how to use, the code is not like yours, it's just a template for you to use :)
html:
<button id="clickMe" type="button">Click Me</button>
<div id="targetLoad"></div>
jQuery:
$('#clickMe').on('click', function()
{
$('#targetLoad').load('path/to/html.html')
});
this will load html.html into the div with the id of targetLoad.
Your issue with your .on() function is that you use a single world, instead of a class or id. To target an id use # and for classes use .
update 1
didn't realise fully this was for an iframe - the problem with this is, because it's a dynamic element that isn't technically part of the DOM, the event won't fire, or at least shouldn't. But you can use the below to target dynamic elements:
$(document).on('click', '.myDynamicElement', function() {})
and this applies the click action on document where the target has a class of myDynamicElement, which is how you get around working with dynamic elements.
To target your iframe though, it might be better to use .find() as the iframe is it's own entity in a way. The above might work for it, but I reckon this should work
var element = $(document).find('.myIframe').find('figure');
$(document).on('click', element, function() {});
update 2 - req from OP in comments below
Example of how to use dynamic event handling:
$('body').on('change', '.myDropdown', function()
{
alert($(this).val())
})
in this case, every change to an input that has a class of .myDropdown, then alert the current value of it.
You are just embedding a youtube video to your frame, so click event on youtube page will always work for video functions of youtube and your java script click event is working on the name "Trailer" of your page. Just click on the name "trailer" and check it is working.
Instead of embedding a youtube video just have the preview and url of the video and have a click event on the url to load that video on separate page as u expected.
I am learning webapplication development using HTML,CSS and JS. Curretly i am trying to display all the videos stored to the UI, i am stuck in displaying the names of the video below them. Currently i am able to display the title of video element only for one video, but if i add more videos i am not able to dispaly the title below them, below is the code i am working on, Can you guys please guide me to achieve to display the title in video element on all the videos
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Videos</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="videos.css">
</head>
<body>
<header>
<h1> Main logo </h1>
<nav>
<ul id="nav">
<li>Home</li>
<li>Videos</li>
</ul>
</nav>
</header>
<div class="divider"></div>
<figure>
<video id="video_player" title="movie1" width="300" height="240" controls>
<source src="1.mp4" type="video/mp4">
</video>
<figcaption id="meta"></figcaption>
</figure>
<figure>
<video id="video_player1" title="movie2" controls width="300" height="240" controls>
<source src="2.mp4" type="video/mp4" />
</video>
<figcaption id="meta1"></figcaption>
</figure>
<figure>
<video id="video_player3" title="movie3" controls width="300" height="240" controls>
<source src="3.mp4" type="video/mp4" />
</video>
<figcaption id="meta2"></figcaption>
</figure>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="videos.js"></script>
</body>
</html>
css code:
header {
background: green;
color: white;
padding: 8px 0px 6px 40px;
height: 50px;
}
header h1 {
font-size: 30px;
float: left;
margin-top: 0px;
margin-right: 50px;
}
nav ul{
padding: 0px;
float: left;
}
nav ul li{
display: inline-block;
list-style-type:none;
color: white;
float: left;
margin-left: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
#nav {
font-family: 'Montserrat', sans-serif;
}
.divider{
background-color: red;
height: 5px;
}
figure {
display: inline-block;
}
figure video {
vertical-align: top;
}
figure figcaption {
text-align: center;
}
js code:
var myVideoPlayer = document.getElementById('video_player' , 'video_player1' , 'video_player2'),
title = myVideoPlayer.getAttribute("title"),
meta = document.getElementById('meta' , 'meta1' , 'meta2');
myVideoPlayer.addEventListener('loadedmetadata', function () {
meta.innerHTML = title ;
});
edit:
var meta = document.getElementById("meta");
var metaa = nums.getElementsByTagName("figcaption");
var newNums = [];
for (var i=0; i < metaa.length; i++) {
newNums.push( parseInt( metaa[i].innerHTML, 10 ) );
}
From where are you calling the eventlistener ('loadedmetadata') ?
Adding something like this code makes it work.
function loadedmetadata(){ meta.innerHTML = title ; } loadedmetadata();
Check your function loadedmetadata, I think it's not getting called.
Also this is wrong.
meta = document.getElementById('meta' , 'meta1' , 'meta2');
This will only take the first value.
You need to create a function which will loop through the id list.
I am teaching myself about animations using simple rectangles and I have so far managed a bit of progress with this simple project:
html:
<!DOCTYPE html>
<html>
<head>
<title>test slider</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<span class="rect">
<span class="otherrect"></span>
</span>
<p id="button"> click here </p>
</body>
</html>
css
.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}
.closed {
height: 0;
background-color: white;
}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
js
$(document).ready(function(){
$("#button").click(function(){
if ($( ".rect" ).hasClass( "closed" )){
$(".rect").removeClass("closed");
} else {
$(".rect").addClass("closed");
}
});
});
And it looks like this:
So, what I was aiming at, was that the red rectangle (class: otherrect) should also collapse and fade like its parent rectangle. How can I do this without using javascript and preferably not having to use the display property. Thanks for your time. P
---------------------------------EDIT AFTER RECEIVING ANSWERS-----------------------------------
Thank you all for your answers. These are all good in one way or another, but I guess I sould have mentioned that the red rectangle is going to be a video in the finished project so I need it to be a child of the other element because if the class that collapses it is applied to it directly, it affects the way it looks. Please refer to this other question to see a gif of what I mean:
slideDown() function behaving oddly
Change your span class or add one like this :
<span class="rect">
<span class="otherrect rect"></span>
</span>
Just add overflow:hidden; in the .rect { class and your good. :)
Move the animation settings into a 3rd class ("anim"), give both span elements that class as well and add the "closed" class to any element with the "anim" class in your onclick.
Note: This uses the same amount of JavaScript as your question, which I assume is ok (but technically doesn't meet the "without using javascript" requirement)
(thx to Mark B for the onclick)
EDIT: Added a video. The animation is a little hokey, sorry :(
$(function(){
$("#button").click(function() {
$('.anim').toggleClass('closed')
});
});
.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
}
.anim {
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}
.closed {
height: 0;
background-color: white;
}
video {all:inherit}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<span class="rect anim">
<span class="otherrect anim"><video class="anim" controls>
<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></span>
</span>
<p id="button"> click here </p>
</body>
I may need to re-title this post. I have a HTML5 video but I'm having a very hard time styling it the way I want it to.
HTML
<header>
<div class="video-holder full-img">
<video autoplay loop muted>
<source src="<?php bloginfo('template_url'); ?>/img/syau.webm" type="video/webm">
<source src="<?php bloginfo('template_url'); ?>/img/syau.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="height:100%">
<div class="row" style="height:100%">
<div class="banner-text col-sm-12 col-md-6 col-md-offset-2">
<h1>Step<br>Your<br><span id="type-selector" class="typed-element"></span><br>Up</h1>
</div>
<div class="btn-container col-md-2">
<div class="btn-cta">
<a class="btn btn-primary btn-lg" href="/roster/">Check us out</a>
</div>
</div>
</div>
</div>
</header>
This is how I'm doing HTML5 video. I have Javascript to get the height of the device so the banner always matches it.
Javascript
function windowResizeFunctions(e) {
var windowH = $(window).height(),
headerH = $('#my-navbar').height();
$('header').css('height', windowH);
}
$(window).resize(function(){
window.requestAnimationFrame(windowResizeFunctions);
});
setTimeout(function() { windowResizeFunctions();
});
This is my CSS
header {
position: relative;
overflow: hidden;
width:100%;
height:100vh;
}
.banner-text {
position: relative;
z-index: 200;
text-align: left;
display: table;
float: left;
height: 100%;
}
.banner-text h1 {
display: table-cell;
vertical-align: middle;
}
.btn-container {
z-index: 201;
height: 100%;
display: table;
}
.btn-cta {
display: table-cell;
vertical-align: bottom;
padding-bottom: 90px;
}
.video-holder {
position:absolute;
height:100%;
width:200%;
left:-50%;
}
video {
position:absolute;
top: -99999px;
bottom: -99999px;
left: -99999px;
right: -99999px;
margin: auto;
min-height:100%;
min-width:50%;
}
Now, this is my real live example. On laptop this looks how I want it, but on everything else it's very hard to work with. What I'm trying to achieve is the banner text on the left, and the button on the bottom right of the container so it's leveled with the baseline of the last word.
I thought to do flexbox. I tried giving .row display:flex and .banner-text align-items:center; but that wouldn't work. I tried a variety of HTML changes to move things around and I couldn't get it, I'd post my attempts but this question would become massive.
I just want it to look like this on laptop/desktop. On tablet and mobile I just want it to stack, text on top and button below. This is coded terribly and I'm not sure how to properly do it.
Put the <a> button inside the <h1> tag -- as the last element.
Increase the width of the <h1> tag by changing its parent class from col-md-6 to col-md-8.
Set the following CSS to the button:
float:right;
position:relative;
top:40px;
It's a little hacky and there's def better solutions out there but that would require restructuring your entire DOM. This is the easiest fix.