Is there a way in Angular 2 to make a video fullscreen once pressing a button?
This is the function I tried so far. (Note that pausing and playing works fine.)
fullscreen(video){
video.requestFullscreen();
}
HTML code
<video #video autoplay>
<source src="assets/videos/mov_bbb.mp4" type="video/mp4">
<img alt = "Test image" src="/assets/images/example.png" title="Your browser does not support the <video> tag">
</video>
<button (click)="fullscreen(video);"> Fullscreen </button>
Following my comment, what you can do (and following this already answered topic) is something like this
#ViewChild('video') video: ElementRef;
toFullScreen() {
let elem = this.video.nativeElement as HTMLVideoElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
Browsers have not yet broadly adopted support for the fullScreen API. So although your code looks ok, it won't behave as expected in some situations.
If this feature is important to your app I suggest using the FScreen polyfill, which is recommended by Mozilla.
NPM install fscreen
Import it into your component
Modify your fullScreen() method to use it:
_
fullscreen(video){
if(fscreen.fullscreenEnabled) {
fscreen.requestFullscreen(video);
} else {console.error('fullscreen is not supported');}
}
If you don't want to introduce a 3rd-party dependency, you may need to use the various prefixes that browsers expect. See the docs or adapt #trichetriche's answer
Related
We need to display the play button on video window if video is paused even if video buffer has enough data (this will happen in safari browser as Safari doesn't allow to play the videos without user intervention). I added event listener for pause event. The code is as given below (please note that this is .vue file)
<template>
<div id="app" #keydown="handleKey($event)">
<video ref="videoRef" src="" id="videoID" width="100%" v-on:pause="onVideoPause"></video>
<div id="videoCC"></div>
<button type="button" id="playVideo" v-on:click="onClickCallback"><img :src="require('#/assets/playVideo.png')"></button>
<router-view tabindex="1"></router-view>
</div>
</template>
export default {
name: 'app',
methods: {
onClickCallback: function () {
console.log('onClickPlayback is called')
let videoPlayer = player.instance()
videoPlayer.play()
videoPlayer.setLogLevel(4) // Set Log level to debug
let playVideoBtn = document.getElementById('playVideo')
// Video is playing. Hide the play button
if (playVideoBtn.style.display === 'block') {
playVideoBtn.style.display = 'none'
}
},
onVideoPause: function () {
console.log('video is paused')
let videoEl = document.getElementById('videoID')
if ((videoEl.readyState > 2) && (videoEl.ended === false)) {
console.log('video buffer has the data and video is not ended')
document.getElementById('playVideo').style.display = 'block'
}
}
}
Basically when video is paused, onVideoPause() is getting called and if video is not ended, I am displaying the play button. In the click handler of the play button, I am playing the video and hiding the play button, But we faced below problem while testing with javascript console as below.
Video is playing. Used pause() from javascript console.
document.getElementById('video').pause()
Play button displayed but when we play() now from console, the button is not getting hidden as we are hiding the play button in click function of play button only. When I suggested we will add event listener for play also on video element, my reviewer suggested me to evaluate if we can do v-bind for the 'paused' attribute of video element.
If we can bind the paused attribute and if we can call a function when ever the value changes, we can do the hiding and display in that function. I am not able to figure out how can we bind the attribute and call the function whenever the value changes as v-bind only works with single expression. I am new to vue.js. Can any one please help me if this is possible with v-bind or with any other Vue directives?
my reviewer suggested me to evaluate if we can do v-bind for the
'paused' attribute of video element
The answer to that question is "no". The video element is not a Vue instance, so its properties are not reactive. You must rely on events to detect changes. I demonstrated a two-way binding in my other answer. Here is another approach that is a little simpler in terms of coding.
new Vue({
el: 'main',
data: {
videoElement: null,
paused: null
},
methods: {
updatePaused(event) {
this.videoElement = event.target;
this.paused = event.target.paused;
},
play() {
this.videoElement.play();
},
pause() {
this.videoElement.pause();
}
},
computed: {
playing() { return !this.paused; }
}
});
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<main>
<video id="videoElement" controls poster="velocity-thumbnail.jpg"
#canplay="updatePaused" #playing="updatePaused" #pause="updatePaused">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.webm" type="video/webm" media="all and (max-width:680px)">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4" type="video/mp4">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.webm" type="video/webm">
<p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
</video>
<div class="controls">
<button v-show="paused" #click="play">▶</button>
<button v-show="playing" #click="pause">⏸</button>
</div>
</main>
The general technique for two-way binding is:
in the bind phase, you install event listeners on the element to update the bound value
in the update phase, you move your bound value into the element.
In your case, you want to listen for the playing and pause events, and set a single playing variable appropriately. (paused is just !playing)
In the example below, I leave the controls on the video player and also add my own. You can use either control, and they stay in sync. (You should also remove the event listeners in the unbind phase. I didn't do that, because it's a little messy, and I wanted to keep the example short and simple.)
new Vue({
el: 'main',
data: {
playing: false
},
computed: {
paused() {
return !this.playing;
}
},
directives: {
play: {
bind(el, binding, vnode) {
el.addEventListener('playing', () => {
vnode.context[binding.expression] = !el.paused;
});
el.addEventListener('pause', () => {
vnode.context[binding.expression] = !el.paused;
});
vnode.context[binding.expression] = !el.paused;
},
update(el, binding) {
if (el.paused) {
if (binding.value) {
el.play();
}
} else if (!binding.value) {
el.pause();
}
}
}
},
methods: {
play() {
this.playing = true;
},
pause() {
this.playing = false;
}
}
});
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<main>
<video id="videoElement" controls poster="velocity-thumbnail.jpg" v-play="playing">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.webm" type="video/webm" media="all and (max-width:680px)">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4" type="video/mp4">
<source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.webm" type="video/webm">
<p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
</video>
<div class="controls">
<button v-show="paused" #click="play">▶</button>
<button v-show="playing" #click="pause">⏸</button>
</div>
</main>
I was messing around to find a way to pause or mute a video, if we take off our cursor from it with using HTML5 and CSS3 only.But i was unable to find a way.
Is there any way to achieve this ?
If you're using jQuery and HTML5 video, you could do something like:
var vid = $(".myVideo");
vid.mouseleave(function() {
vid.pause()
});
Then, when you want to play again,
vid.mouseenter(function() {
vid.play()
});
The functions vid.play() and vid.pause() are built in so this shouldn't give you any trouble.
Your HTML:
<div id="video-wrapper">
<video id="v" src="video.mp4" controls></video>
</div>
Getting video element using jQuery:
var v = $("#v");
Check if video is ready to play:
$(v).on('canplay', function(){
$(v).mouseenter(function(){
$(this).get(0).play();
}).mouseleave(function(){
$(this).get(0).pause();
})
});
I've made custom controls for my HTML5 video but I don't know how to have that CSS still apply when I go fullscreen.
Here's the [website] I've based my controls on.
On this site, you'll notice that when you click the fullscreen button the custom controls get lost and the video reverts to the default <video> controls.
Does anyone know how to have these custom controls styling/CSS still apply when you go fullscreen?
i answered my own question, the key is that the custom controls are inside the <div> that includes the video that you want to take full screen. In my code below, this <div> is called "videoContainer".
Here's the link I used to figure this out.
http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
here's the JS code for both entering and exiting fullscreen mode in webkit and mozilla browsers:
var $video=$('video');
//fullscreen button clicked
$('#fullscreenBtn').on('click', function() {
$(this).toggleClass('enterFullscreenBtn');
if($.isFunction($video.get(0).webkitEnterFullscreen)) {
if($(this).hasClass("enterFullscreenBtn"))
document.getElementById('videoContainer').webkitRequestFullScreen();
else
document.webkitCancelFullScreen();
}
else if ($.isFunction($video.get(0).mozRequestFullScreen)) {
if($(this).hasClass("enterFullscreenBtn"))
document.getElementById('videoContainer').mozRequestFullScreen();
else
document.mozCancelFullScreen();
}
else {
alert('Your browsers doesn\'t support fullscreen');
}
});
and here's the HTML:
<div id="videoContainer">
<video>...<source></source>
</video>
<div> custom controls
<button>play/pause</button>
<button id="fullscreenBtn" class="enterFullscreenBtn">fullscreen</button>
</div>
</div>
Show custom controller
#customController{
-------------------;
-------------------;
-------------------;
z-index: 2147483647;
}
Hide native controller
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}
Here's a solution that uses the modern Fullscreen API, which is supported on all major browsers today.
// `container` is the element containing the video and your custom controls
const toggleFullscreen = () => {
if(document.fullscreenElement) {
document.exitFullscreen();
} else {
container.requestFullscreen();
}
};
I'm working to get a video on my webpage with the video tag.
I'm using FlareVideo to create my video tag. I can get the video to work on every browser that I need (IE 7/8/9, Firefox, Chrome, Safari).
The thing is, when I set the width and heigt, it looks like Safari and Chrome do not care at all and just put the right width, but a way too high height.
Also, with IE 7 and 8, the flash player used when HTML5 video is not supported by the browser is too small.
Hope somebody can help
Thanks
EDIT: added code
The HTML code
<div id="flarevideo" class="video-player" style="display:none;"></div>
The javascript code
function vidSwap(vidURL, awidth, aheight) {
var pwidth = 720;
var pheight = 406;
$("div.video-player").show();
fv = $("#flarevideo").flareVideo({
flashSrc: window.pathToFlashVideo,
width: pwidth,
height: pheight,
autobuffer: false,
preload: false
});
fv.load([
{
src: '[server address]' + vidURL +'.mp4',
type: 'video/mp4'
},
{
src: '{server address]' + vidURL + '.ogv',
type: 'video/ogg; codecs="theora, vorbis"'
}
]);
}
Note that the javascript is a bit different that what it should be (width and heigth here are hardcoded instead of using the two parameters of my function).
Also, the format of vidUrl is "/[name fo the video without extension"]
And, window.pathToFlashVideo is the path for the flash fallback, defined on my html page
Seems like the problem was coming from the div's CSS that contained the video. I removed the height:100% and now it's working fine.
Hope this helps anybody else with the same problem
I feel like I'm taking crazy pills here because I can not figure out how to render the html 5 audio tag with custom controls.
I have this html so far, and it works no problem:
<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>
How do I get it to display ONLY the play button, and perhaps when playing, show the pause button in it's place.
From what I read,
By default, the element will not expose any sort of player controls.
You can create your own controls with plain old HTML, CSS, and
JavaScript. The element has methods like play() and pause() and a
read/write property called currentTime. There are also read/write
volume and muted properties. So you really have everything you need to
build your own interface.
If you don’t want to build your own interface, you can tell the
browser to display a built-in set of controls. To do this, just
include the controls attribute in your tag.
But I can not find any examples of using custom controls. How do you get just the play button?
You create your elements like so...
<audio id="yourAudio" preload='none'>
<source src='the url to the audio' type='audio/wav' />
</audio>
play!
And add some functionality:
var yourAudio = document.getElementById('yourAudio'),
ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
// Update the Button
var pause = ctrl.innerHTML === 'pause!';
ctrl.innerHTML = pause ? 'play!' : 'pause!';
// Update the Audio
var method = pause ? 'pause' : 'play';
yourAudio[method]();
// Prevent Default Action
return false;
};
Right now, the button is just simple text ("play!" or "pause!"), but you could do just about anything you wanted with CSS. Instead of setting the innerHTML, set the className and you're good to go!
After a lot of research, I found an easy way of eliminating and manipulating specific parts of the predefined controls.
Create your elements as you usually would, like so:
<audio autoPlay>
<source src='audioUrl' type='audio/mpeg' />
</audio>
Then in the CSS file, you write the following:
/* Specifies the size of the audio container */
audio {
width: 115px;
height: 25px;
}
audio::-webkit-media-controls-panel {
-webkit-justify-content: center;
height: 25px;
}
/* Removes the timeline */
audio::-webkit-media-controls-timeline {
display: none !important;
}
/* Removes the time stamp */
audio::-webkit-media-controls-current-time-display {
display: none;
}
audio::-webkit-media-controls-time-remaining-display {
display: none;
}
With this code, you should get a small and nice looking container with only mute-button, pause/play-button and the 'download-file'-tag.
For an overview of all the things you can modify, have a look here.
The following code will also remove the mute- and the play-button:
/* Removes mute-button */
audio::-webkit-media-controls-mute-button {
display: none;
}
/* Removes play-button */
audio::-webkit-media-controls-play-button {
display: none;
}
I have been experimenting with the use of a graphic instead of the player. Set the style within the 'audio' tag to "display: none; width: 0px; height: 0px;" (display none does not work on iPad, thus the additional width-0 and height-0 settings). Also not including the "controls" attribute should work. (different systems/browsers & desktop vs iOS all act differently.....)
Eg:
<head>
<script>
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
</script>
</head>
<body>
Click the speaker to hear the sound. <a href="javascript:null()" onClick="EvalSound('sound1'); return false;">
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer>
</body>
The "javascript:null()" works on iPad in conjunction with "return false;" as opposed to the usual "#".
For more really useful information:
http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
if you want the built-in play-button only you could:
use autio-tag's class attribute:
<audio controls preload='auto' class="audio_volume_only"><source src='the url to the
audio' type='audio/mp3' /></audio>
and fit the css:
.audio_volume_only {
width: 35px;
}
i hoped controls has some parameters, but not found any or misunderstood .. we'll see.
then possibly use audio's onplay - event to change the css to your need.
the play-button will become the pause-button in built-in controls
as others pointed out, you can always make your own....