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>
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);
}
Hi so I am working on a project and am making a custom video player I used this website to help make it http://www.inwebson.com/demo/html5-video/demo1/. So my problem is that the controls will go full screen fine but the video stays its original size in the middle with black filling the rest of the screen.
Here is my full screen code:
$('.buttonFullscreen').on('click', function() {
$(this).toggleClass('enterFullscreenBtn');
if ($.isFunction(video[0].webkitEnterFullscreen)) {
if ($(this).hasClass("enterFullscreenBtn")) {
document.getElementById('videoContainer').webkitRequestFullScreen();
} else {
document.webkitCancelFullScreen();
}
} else if ($.isFunction(video[0].mozRequestFullScreen)) {
if ($(this).hasClass("enterFullscreenBtn")) {
document.getElementById('videoContainer').mozRequestFullScreen();
} else {
document.mozCancelFullScreen();
}
} else {
alert('Your browsers doesn\'t support fullscreen');
}
});
and here is my video and controls code:
<div id="videoContainer" width='{{width}}' height='{{height}}'>
<video id='{{videoContainerID}}-video' class='{{videoID}}' controls poster='{{thumbnailURL}}' width="100%">
<source src='{{videoURL}}' type='video/mp4'></source>
<p class='hlplayer-unsupported-player'>Your browser is not supported by this player. This video player is still in development.</p>
</video>
<div class='hlplayer-video-title'>{{title}}</div>
<div class='controls'>
<div class='top-bar-controls' width='{{width}}'>
<div class='progress'>
<span class='buffer-bar'></span>
<span class='time-bar'></span>
</div>
<div class='time'>
<span class='current'></span> / <span class='duration'></span>
</div>
</div>
<div class='bottom-bar-controls' width='{{width}}'>
<div class='buttonPlay button' title='Play/Pause'></div>
<div class='buttonSettings button' title='Settings'></div>
<div class='buttonNotes button' title='Take Notes'></div>
<div class='buttonLight lighton button' title='Light On/Off'></div>
<div class='buttonFullscreen button' title='Fullscreen'></div>
<div class='volume' title='Volume'>
<span class='volume-bar'></span>
</div>
<div class='sound sound2 button' title='Mute/Unmute'></div>
</div>
</div>
<div class='loading'></div>
<div class='hlplayer-settings'>
<label class='settings-checkbox-label'><input class='settings-checkbox' id="show-notes-checkbox" type='checkbox' name='notes' checked></input> Show Notes</label>
</div>
</div>
Can you think of why this is happening? Thanks in advance.
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
<source src="videos/mikethefrog.webm" type="video/webm">
<source src="videos/mikethefrog.ogv" type="video/ogv">
<source src="videos/mikethefrog.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
Download the video instead.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="full-screen">Full-Screen</button>
</div>
</div>
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
Or you can use the following:
<script>
var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
If none of these work, just use a different player. There are plenty out there that work :).
I have a HTML5 video which works fines,the problem that I have is that it doesn't have a close button.How can I include the close button in the video player?
Here is my code:
<div style="text-align:center">
<video id="playvideo" width="450" controls>
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">
</video>
</div>
http://jsfiddle.net/76j7129f/3/
SOLUTION
HTML
<div style="text-align:center">
<video id="playvideo" width="450" controls="controls" >
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
</video>
<button class="close">Hide</button>
</div>
CSS
video + button.close {
font-size: 10px;
display: block;
}
video.hide {
display: none;
}
JS
var hideStr = 'Hide', showStr = 'Show', hideClass = 'hide';
var buttons = document.querySelectorAll('video + button.close');
for(var b = 0; b < buttons.length; b++){
var button = buttons[b];
button.addEventListener('click', function(){
var video = this.parentNode.childNodes[1];
video.muted = !video.muted;
video.classList.toggle (hideClass);
if(this.textContent == hideStr) this.textContent = showStr;
else this.textContent = hideStr;
});
}
UPDATE
JQUERY SOLUTION
HTML
<script src="//code.jquery.com/jquery-git1.js"></script>
JQUERY
var hideStr = 'Hide', showStr = 'Show', hideClass = 'hide';
$('video + button.close').click(function(){
var button = $(this);
var video = button.parent().find('video');
video.prop('muted', !video.prop('muted'));
video.toggleClass(hideClass);
if(button.text() == hideStr) button.text(showStr);
else button.text(hideStr);
});
This is for a school assignment but I can't seem to get the video to work.
I'm using chrome. The buttons load and so does the player(black screen), but I can't get it to seem to work.
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br/>
<video id="myVideo" width="420">
<source src="audi.mp4" type="video/mp4">
</video>
</div>
<script>
var myVideo = document.getElementById("myVideo");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>