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?
Related
How can I stop the video while closing it?
Can someone give me some solution or new code for this?
<div class="video-player" id="videoPlayer">
<video width="100%" controls autoplay id="myVideo">
<source src="filmy/1.%20No%20Roots%20-%20Alice%20Merton.mp4" type="video/mp4">
</video>
<img src="images/close.png" class="close-btn"
onclick="stopVideo()">
</div>
<script>
var videoPlayer = document.getElementById("videoPlayer");
var myVideo = document.getElementById("myVideo");
function stopVideo(){
videoPlayer.style.display = "none";
}
function playVideo(file){
myVideo.src = file;
videoPlayer.style.display = "block";
}
</script>
And here is where I declare video:
<div class="small-img-row">
<div class="small-img">
<img src="images/Sk%C5%82ad%20Artur%202.jpg" width="170px" height="100px">
<img src="images/play.png" class="play-btn" onclick="playVideo('filmy/2. Dance Monkey - Tones and I.mp4')">
</div>
<p>Dance Monkey - Tones and I</p>
</div>
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);
}
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>
I'm a beginner to Laravel 5, and I'm trying to play a video in my page.
Video code :
<div class="videoWrapper">
<video controls="" autoplay="" width="640" height="360">
<source src="{{ $lesson->download }}{{$video}}" type="video/mp4"></source>
</video>
<!-- <iframe
width="100%"
height="315"
src="{{ $lesson->download }}{{$video}}"
frameborder="0" allowfullscreen></iframe> -->
<hr/>
</div>
The result :
When I inspect, the url is correct :
By the way, when I use the iframe for Youtube videos, it works.
Thank you
it's my code. maybe works for you:
#if(strpos($vidUrl,"video:")!== false)
<video onclick="showVideo()"style="display: block;"
src="{{str_replace('video:','', $vidUrl)}}" controls width="500"
#endif
my $vidUrl is something like "video://SOME_URL//"
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>