When I play video it may be landscape or portrait in orientation. I have 2 images imgfeatured1 and imgfeatured2 which appear left and right of the video respectively. I wish these images to adjust automatically to be the same height as the video being played.
<div id="streaming">
<video playsinline ID="videoToPlay" poster="https://www.example.co.uk/files/images/videoPoster.jpg" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
<asp:Image ID="imgFeatured1" alt="Featured 1" imageUrl="https://www.example.co.uk/files/images/icons/featured1.png" class="videologo" runat="server" />
<asp:Image ID="imgFeatured2" alt="Featured 2" imageUrl="https://www.example.co.uk/files/images/icons/featured2.png" class="videologoright" runat="server" />
</div>
CSS so far..
.videologo {
position: absolute;
left: 5px;
}
.videologoright {
position: absolute;
right: 5px;
}
if you want it static based on what is loaded on request you need to use javascript to get and set height on the images.
if you want the images to be on each side of the video you need to rearrange the html if you want to follow best practices.
Javascript version:
Get the height of the video and set that height to the image while width = auto
var imageOne = document.getElementById("imgFeatured1");
var imageTwo = document.getElementById("imgFeatured2");
var vid = document.getElementById("videoToPlay");
imageOne.style.height = vid.offsetHeight +"px";
imageTwo.style.height = vid.offsetHeight + "px";
console.log(vid.offsetHeight);
console.log(imageTwo.style.height);
#streaming {
display: flex;
}
body {
background: #333;
}
<body>
<div id="streaming">
<img id="imgFeatured1" alt="Featured 1"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologo" runat="server" />
<div id="VidWrapper">
<video playsinline id="videoToPlay" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
</div>
<img id="imgFeatured2" alt="Featured 2"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologoright" runat="server" />
</div>
</body>
CSS version
Set img and video height to the same and automatic width
#streaming {
display: flex;
}
body {
background: #333;
}
img, video{
height: 25vh;
width: auto;
}
<body>
<div id="streaming">
<img id="imgFeatured1" alt="Featured 1"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologo" runat="server" />
<div id="VidWrapper">
<video playsinline id="videoToPlay" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
</div>
<img id="imgFeatured2" alt="Featured 2"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologoright" runat="server" />
</div>
</body>
Related
I am very new to angular (and the front end) and I cannot get this video to autoplay.
I have tried a lot of variations:
<div class="landing-page">
<video id="videoLandingPage" class="video-js" autoplay controls type="video/mp4" src="https://12345asdf.cloudfront.net/a_video.mp4"></video>
</div>
This one:
<div class="landing-page">
<video id="videoLandingPage" class="video-js" autoplay muted controls type="video/mp4" src="https://12345asdf.cloudfront.net/a_video.mp4"></video>
</div>
And this:
<div class="landing-page">
<video id="videoLandingPage" class="video-js" autoplay muted controls loop type="video/mp4" src="https://12345asdf.cloudfront.net/a_video.mp4"></video>
</div>
And this:
<div class="landing-page">
<video id="videoLandingPage" class="video-js" autoplay muted controls loop playsinline type="video/mp4" src="https://12345asdf.cloudfront.net/a_video.mp4"></video>
</div>
Nothing seems to let the video auto play. So... I tried:
export class LandingPageComponent implements AfterViewChecked {
constructor() { }
ngAfterViewChecked(): void {
var video = document.getElementById('videoLandingPage') as HTMLVideoElement;
video.play();
}
}
Any one know why this is happening? or could point me in a quick fix direction?
I Have multiple videos in single page of Angular Application
I want to play video while scrolling when video element come to element, and pause other videos.
i.e
<div class="video_content left">
<span style="font-weight:bold">1</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">2</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">3</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">4</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
#HostListener('window:scroll', ['$event'])
scroll(event: any) {
console.log(window.pageYOffset);
var demo_video: any = document.getElementById("demo_video");
var how_to_video: any = document.getElementById("how_to_video");
if (window.pageYOffset > 400 && window.pageYOffset < 1000) {
demo_video.muted = true;
demo_video.pause();
how_to_video.play();
}
}
ngOnInit(): void {
var demo_video: any = document.getElementById("demo_video");
demo_video.muted = false;
demo_video.play();
window.addEventListener('scroll', this.scroll, true);
}
Actually I'm using something like (very easy html):
<picture>
<source srcset="img/image.webp" type="image/webp">
<source srcset="img/image.jp2" type="image/jp2">
<img src="img/image.jpg" alt="Alt Text!">
</picture>
to deliver for best SEO results the images to the users. If I have parts on the site like:
<div class="myclass" style="background-image: url(img/image.jpg)"></div>
How can I do it there?
As far as I know you have to use javascript then and some css. On my websites I use JQuery. Below a example on how I do it on my websites.
<style>
.myclass {
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
overflow: hidden;
background-color: #222222;
}
/* Hide the image so only the background image will be vissible */
.myclass img {
opacity: 0;
}
</style>
<div class="myclass">
<picture>
<source srcset="img/image.webp" type="image/webp">
<source srcset="img/image.jp2" type="image/jp2">
<img src="img/image.jpg" alt="Alt Text!">
</picture>
</div>
<script>
function setBackgroundIMG() {
var $imgSection = $('.myclass');
// Loop through all the myclass elements
$imgSection.each(function () {
// Find the image tag within the myclass
var $img = $(this).find('img');
// Get the image the browser will use in the picture tag
var $srcSet = $img.prop('currentSrc') || $img.prop('src');
// For debug purpose
console.log($srcSet);
// Set the myclass background
$(this).css({
'background-image': 'url(' + $srcSet + ')'
});
});
}
$(window).on('load resize', function () {
setBackgroundIMG();
});
</script>
You can also add multiple sizes to the srcset like below, so smaller images will be used on smaller screens.
<div class="img-container" style="">
<picture>
<source type="image/webp" srcset="views/images/200/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 200w, views/images/400/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 400w, views/images/500/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 500w, views/images/600/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 600w, views/images/767/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 767w, views/images/991/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 991w, views/images/1200/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 1200w, views/images/1500/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 1500w, views/images/1920/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 1920w, views/images/2400/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg.webp 2400w">
<source srcset="views/images/200/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 200w, views/images/400/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 400w, views/images/500/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 500w, views/images/600/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 600w, views/images/767/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 767w, views/images/991/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 991w, views/images/1200/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 1200w, views/images/1500/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 1500w, views/images/1920/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 1920w, views/images/2400/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg 2400w">
<img src="views/images/2500x1667_1dc91ccb0db62f2b0d0106768af6e46c40817fab.jpg" alt="" class="img-fluid"></picture>
</div>
I have the following code for playing a video and showing its subtitle track.
<video id="vTest" class="playr_video" controls preload="metadata">
<source src='upc-tobymanley.theora.ogg' type='video/ogg'>
<source src='upc-tobymanley.mp4' type='video/mp4'>
<track label="English subtitles" kind="subtitles" srclang="en" src="upc-video-subtitles-en.vtt" default>
</video>
<div id="subtitle"> </div>
Is it possible to show the subtitles inside <div id="subtitle"> </div> instead of the player?
Add this javaScript after <video> element
<script>
loadTextTrack({videoId:'vTest', // the ID of the video tag
kind:'subtitles', // the kind of track
srclang:'en', // the language of the source file (optional)
targetId:'subtitle'}); // the ID of the element into which to insert the timed text
</script>
Define some css
<style type="text/css">
#subtitle{width: 480px; position: absolute; top: 280px;padding: 3px 10px; text-align: center; color:#fff;background-color:#000; font-family: Helvetica,Arial,sans-serif; font-size: 0.9em; font-weight: bold;min-height:3.6em;}
</style>
I have a landing page where the user can Login and signup and in the background is a Trailer for the site. The video has audio, and is a .mp4 file.
My main goal is to get a feature where the user can click a certain button and all page audio will be muted.
Many thanks
---HTML WITH VIDEO---
<div class="Main animated fadeIn">
<!--To make the Site Unique, I have included Several Trailers for the Main Landing Page !-->
<video autoplay="" id="bgvid" loop="" poster="polina.jpg"><source src=
"img/indexMV.mp4" type="video/mp4"> <source src="img/indexMV.mp4"
type="video/mp4"></video>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="mute_all">Mute all</button> |
<button id="unmute_all">UnMute all</button>
<br/>
<script>
$(document).ready(function(){
/*** Mute all ***/
$('#mute_all').on('click',function(){
/*** Mute all video and audio on page ***/
$('body video, body audio').each(function(){
/*** Do it here globally ***/
$(this).prop('muted', true);
});
});
/*** UnMute all ***/
$('#unmute_all').on('click',function(){
/*** Un Mute all video and audio on page ***/
$('body video, body audio').each(function(){
/*** Do it here globally ***/
$(this).prop('muted', false);
});
});
});
</script>
<h4>Video</h4>
<video id="myVideo" width="320" height="176" controls>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<br/>
<h4>AUdio</h4>
<audio width="320" height="176" controls>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"> Your browser does not support HTML5 video.
</audio>
Just get a reference to your video and you can mute/unmute it
var vid = document.getElementById("bgvid");
vid.muted = true; // to mute
vid.muted = false; // to unmute
You wanted to be able to mute any and all sources of audio, then you'll need to be able to collect references to all instances of video and/or audio playing. This is what this demo does:
Plays/Pauses 5 videos individually or all at once.
Mute/Unmute volume individually or all at once.
This is the process:
Make a NodeList (vPlayers) of all video elements with the class of .vPlayer.
Take the NodeList (vPlayers) and convert it into an array (vArray).
EventListeners are added to the buttons, vPlay and vMute and once triggered, by a click, the callback function will iterate through the vArray.
Each video element (.vPlayer a.k.a. vArray[i]) will be checked:
to see if it's playing a video (playToggle function), or ...
to see if it's muted (muteToggle function).
After the preliminary status check, playToggle and muteToggle will play/pause and mute/unmute each vPlayer according to vPlayer's state.
const vids = Array.from(document.querySelectorAll("video"));
const vControl = document.forms.vControl;
const vC = vControl.elements;
const vPlay = vC.vPlay;
vPlay.addEventListener('click', playToggle);
function playToggle(e) {
e.target.textContent = e.target.textContent === '▶️' ? '⏸️' : '▶️';
vids.forEach(v => v.paused ? v.play() : v.pause());
}
const vMute = vC.vMute;
vMute.addEventListener('click', muteToggle);
function muteToggle(e) {
e.target.textContent = e.target.textContent === '🔊' ? '🔇' : '🔊';
vids.forEach(v => {
if (v.muted) {
v.muted = false;
} else {
v.muted = true;
}
});
}
button {
display: inline-flex;
justify-content: center;
align-items: center;
margin: 15px;
width: 54px;
line-height: 36px;
font: 300 2.5ch/1 'Consolas';
color: #EEE;
background: rgba(83, 83, 83, 0.25);
border: 3px outset grey;
border-radius: 9px;
cursor: pointer;
pointer-events: auto;
}
button:hover {
background: transparent;
color: #00D;
border: 3px inset blue;
}
.vBox {
display: table-cell;
}
#vControl {
width: 295px;
height: 160px;
display: inline-table;
}
fieldset {
display: flex;
}
<section class="vBox">
<video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs21s3.png" width="320" height="180" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4" type="video/mp4">
</video>
<video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs12s3.png" width="320" height="180" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
</video>
<form id="vControl" name="vControl">
<fieldset>
<button id="vPlay" type='button'>▶️</button>
<button id="vMute" type='button'>🔊</button>
</fieldset>
</form>
</section>