I need to know how do I use the VgFullscreenAPI. The official documentation doesn't help.
This is what I have:
<vg-player
(onPlayerReady)="onPlayerReady($event)"
(onChangeFullscreen)="toggleFullscreen($event)">
<vg-play-pause #playBtn class="play-btn">
<span class="vg-icon-play_arrow"></span>
</vg-play-pause>
<vg-controls [vgAutohide]="true" [vgAutohideTime]="4" >
<vg-play-pause</vg-play-pause>
<vg-mute></vg-mute>
<vg-fullscreen class="ml-auto"></vg-fullscreen>
</vg-controls>
<video #media
[vgMedia]="media"
[attr.id]="post.id"
preload="none"
[poster]="post.thumbnail"
(click)="onVideoClick()"
loop>
<source [src]="post.source" type="video/mp4">
</video>
</vg-player>
toggleFullscreen($event){
console.log($event);
}
I have tried using the output event emitter (onChangeFullscreen) on vg-plater, vg-fullscreen, and video tags.
Documentation
The event is provided by the VgFullscreenAPI service inside VgPlayer, you can access it like this inside your component class:
#ViewChild(VgPlayer) vgPlayer: VgPlayer;
ngAfterViewInit(): void {
this.vgPlayer.fsAPI.onChangeFullscreen.subscribe((event) => {
this.toggleFullscreen(event);
});
}
Don't really know why they made it an EventEmitter inside the service. Doesn't seem like they really understand the new angular version yet :)
Related
I'm working on a page with a video player in which I'm trying to show vtt captions and get information from the cues in the <track> element.
Here's what's relevant for the player in HTML:
<div class="video">
<video id="vid">
<source src="Video.mp4" type="video/mp4">
<track kind="subtitles" src="Captions.vtt" srclang="en">
</video>
</div>
I had something like this in my JavaScript first, just to see what I was getting before manipulating anything in code.
var trackObject = $('track')[0].track;
trackObject.mode = 'showing';
console.log('Track cues:');
console.log(trackObject.cues);
console.log(trackObject.cues[0]);
The change to the mode attribute is done there because, if I set default to the <track> element in HTML, then the video doesn't appear in many browsers. Still don't know why.
What this prints to the console is the following:
However, when I expand the TextTrackCueList, I do see the cues:
This has only made sense to me if I assume that the cues have loaded into the element, but the length attribute hasn't been updated. But I still don't know what's that length I'm seeing at the end of the list, which shows the actual number of cues.
I haven't found any kind of load event on the text track, so this is what I did to make sure I can get the cues:
var trackObject = $('track')[0].track;
trackObject.mode = 'showing';
var waitForCues = setInterval(function() {
if (trackObject.cues.length > 0) {
var cueList = getTracks(trackObject)
// ...Do some processing with the cues...
clearInterval(waitForCues);
}
}, 40);
Why does this happen with the length attribute of the track element? How can I get rid of that waiting for the length to be greater than 0?
As an HTMLMediaElement, the <track> element supports the same global load and error events that any other HTMLElement does, so you can listen for those to determine whether your VTT is ready for business or not.
mytrack.addEventListener(`load`, evt => {
console.log(`good to go`);
const { track } = mytrack;
// force this track to become active so we can get the cues:
track.mode = "showing";
const { cues } = track;
console.log(`${cues.length} cues found`);
});
mytrack.addEventListener(`error`, evt => {
console.log(`yeah that's a problem`);
});
<video controls>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
<track
id="mytrack"
kind="captions"
src="data:text/plain;charset=utf-8,WEBVTT%0A%0A00%3A00%3A00.500%20--%3E%2000%3A00%3A02.000%0AThe%20Web%20is%20always%20changing%0A%0A00%3A00%3A02.500%20--%3E%2000%3A00%3A04.300%0Aand%20the%20way%20we%20access%20it%20is%20changing"
srclang="en"
label="English"
default="default">
>
</video>
Well, as counter-intuitive as it sounds, muted tag is somehow ignored; check out the snippet below,
first one is rendered with react, the second one regular html; inspect them with your dev tools, and you see the react on doesn't have muted attribute; I already tried muted={true}, muted="true" but non is working.
function VideoPreview() {
return (
<div className="videopreview-container">
React tag:
<video
className="videopreview-container_video"
width="320"
height="240"
controls
autoPlay
muted
>
<source src="https://raw.githubusercontent.com/rpsthecoder/h/gh-pages/OSRO-animation.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
);
}
ReactDOM.render(<VideoPreview />, root)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<hr/>
Regular html:
<video
width="320"
height="240"
controls
autoplay
muted
>
<source src="https://raw.githubusercontent.com/rpsthecoder/h/gh-pages/OSRO-animation.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
This is actually a known issue which has existed since 2016.
The video will be muted correctly, but the property will not be set in the DOM.
You can find multiple workarounds in the GitHub issue, although there might be pros and cons with any of them.
As mentioned by #FluidSense it is an open bug since forever.
I could achieve it like this:
import React, { useRef, useEffect } from "react";
export default function Video({ src, isMuted }) {
const refVideo = useRef(null);
useEffect(() => {
if (!refVideo.current) {
return;
}
if (isMuted) {
//open bug since 2017 that you cannot set muted in video element https://github.com/facebook/react/issues/10389
refVideo.current.defaultMuted = true;
refVideo.current.muted = true;
}
refVideo.current.srcObject = src;
}, [src]);
return (
<video
ref={refVideo}
autoPlay
playsInline //FIX iOS black screen
/>
);
}
muted works if you type it as muted="true". Using the string true sends the attribute to the DOM now
Here is how I dealt with it using dangerouslySetInnerHTML:
import React, { Component } from "react";
export default class VideoComponent extends Component {
state = {
videoStr: "",
};
componentDidMount() {
const { src } = this.props;
const videoStr = `
<video autoplay loop muted>
<source src=${src} type="video/mp4" />
</video>
`;
this.setState({ videoStr });
}
render() {
return (
<div
className={this.props.className}
dangerouslySetInnerHTML={{ __html: this.state.videoStr }}
/>
);
}
}
I would also note that some browsers like Chrome might have a limit for the file size a video can be. I was running my own videos on my website and when I inspected the page and looked under Sources I did not find the video I had used and been looking for. This forced me to investigate further. I realized the video that I was running was about 10.4mb. It was large relative to the usual payload of a website so I lowered the size to around 5mb and the video appeared on my site.
Some other information about my steps to finding a solutions was that I was using my localhost to run my React app. I also ran my React app on Safari which surprisingly displayed my video even when the size was 10.4mb. I'm guessing that browsers have different criteria for video sizes.
I ran into the same problem, so I made a custom HTML element that adds the muted video. Here is the custom muted video:
class MutedVideo extends HTMLVideoElement {
constructor() {
super();
this.muted = true;
// I also noticed that you used autoplay, so I added it too.
this.autoplay = true;
}
}
customElements.define("x-muted", MutedVideo, { extends: "video" });
And here the video preview.
// Notice how I removed the muted and autoPlay props and added the 'is' prop
function VideoPreview() {
return (
<video
is="x-muted"
width="320"
height="240"
controls
src="https://raw.githubusercontent.com/rpsthecoder/h/gh-pages/OSRO-animation.mp4"
>
Sorry, your browser does not support the HTML video tag
</video>
);
}
Here is a working demo
from my own project. (WORK)
const Header = () => {
const [isMuted, setIsMuted] = useState(false);
return (
<div className="header">
<video src={headerBg} autoPlay loop muted={isMuted? true : false} />
<div className="container" >
<div className="btn-mute" onClick={() => setIsMuted(!isMuted)}/>
</div>
</div>
);
};
I use the HTML video element. As source I use a .mp4 video with sound. On my video element there are a few attributes. Default I use the attribute muted so there is no sound. With some JavaScript I add or remove the attribute muted by clicking on a button. So this works, when I inspect my markup and click the button I can see how the attribute muted will be added or removed (check out my snippet below).
My problem is, that when removing it, there is no sound. If I start the video file in an video player on my laptop or open it directly in the browser, I can hear the sound. Due to many posts, it should be possible to toggle the sound with this solution. I don't know why it doesn't have sound only when I use it in my video element with adding/removing the attribute muted. Any ideas?
const $ctx = $('.video');
const $video = $ctx.find('.video__video');
const $toggleSound = $ctx.find('.video__toggle-sound');
$toggleSound.click(this.handleVideoSound.bind(this));
function handleVideoSound() {
const attr = $video.attr('muted');
if (typeof attr !== typeof undefined && attr !== false) {
$video.removeAttr('muted');
} else {
$video.attr('muted', '');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<video class="video__video" autoplay loop muted playsinline poster="/assets/img/video-poster.png">
<source src="/assets/video/video.mp4" type="video/mp4">
</video>
<button class="video__toggle-sound">Toggle video sound</button>
</div>
Replace your handleVideoSound method with the below code
function handleVideoSound() {
const attr = $video.prop("muted");
$video.prop("muted", !attr);
}
Hope it will help you. Below is the working code snippet.
const $ctx = $(".video");
const $video = $ctx.find(".video__video");
const $toggleSound = $ctx.find(".video__toggle-sound");
$toggleSound.click(this.handleVideoSound.bind(this));
function handleVideoSound() {
const attr = $video.prop("muted");
$video.prop("muted", !attr);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<video class="video__video" autoplay loop muted playsinline poster="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", type="video/mp4" />
</video>
<button class="video__toggle-sound">Toggle video sound</button>
</div>
Now I have this list of videos on my side menu on my webapp. When any item on the list is clicked, an observable is fired and that helps change the "src" attribute of video tag. But it doesn't look like it's working.
Here's my html file:
<div class="video-container video">
<video width="400px" height="300px" controls (click)="toggleVideo()" #videoPlayer>
<source [src]="src" type="video/mp4" /> Browser not supported
</video>
</div>
And here's my .ts file
src;
mySubs: Subscription<string>;
constructor(private vid: VideosService) { }
ngOnInit() {
this.src = "...some default src";
this.mySubs = this.vid.getVodSub().subscribe(index => {
this.src = this.vid.videos[index].src;
});
}
ngOnDestroy() {
this.mySubs.unsubscribe();
}
As you and I can guess, the video element takes the initial src attribute value set by me. But when the "src" property is changed in the .subscribe() method, the video src doesn't change.
I've also tried setting src attribute via calling a function, like src="getMySrc()", but it doesn't work too.
How can I fix this? Thank you!
First of all, you should keep as much logic outside of templates as you are able to :)
I think you should map your observable to another one which will give back src of the video.
Try something like:
src;
mySubs: Subscription<string>;
actualVideo: Observable<string>
constructor(private vid: VideosService) { }
ngOnInit() {
this.actualVideo = this.vid.getVodSub().pipe(map(index => {
return this.vid.videos[index].src;
}));
}
Then use an async pipe in the template:
<source [src]="actualVideo | async" type="video/mp4" />
https://angular.io/api/common/AsyncPipe
I have a video directive which plays html5 video:
(function(){
angular.module('app.video')
.directive('demoVideo', demoVideo);
function demoVideo(){
return{
templateUrl: "videoTemplate.html",
controller: function(videoService, $sce){
var vm = this;
videoService.get().then(function(data){
vm.videoDataUrlMp4 = $sce.trustAsResourceUrl(data.video);//"http://pdl.vimeocdn.com/89496/595/203684545.mp4?token2=1418313891_4826d99475da5695f5d7999863fb212c&aksessionid=732c8c4ae38ae4aa"
});
},
bindToController: true,
controllerAs: 'video'
}
}
})();
The template is:
<script type="text/ng-template" id="videoTemplate.html">
<video id="video" controls="true">
<source id="mp4" ng-src="{{ video.videoDataUrlMp4 }}" type="video/mp4">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
The problem is that the video is not loaded. (I can see that the src is set to video's source, but it is not loaded. When I change the binding to be direct (not inside a callback), it does work!
I tried $scope.$apply() with no luck (throws an error).
What am I missing here?
tnx!
Have you tried returning the value?
Like this:
videoService.get().then(function(data){
vm.videoDataUrlMp4 = $sce.trustAsResourceUrl(data.video);//"http://pdl.vimeocdn.com/89496/595/203684545.mp4?token2=1418313891_4826d99475da5695f5d7999863fb212c&aksessionid=732c8c4ae38ae4aa";
return vm.video.DataUrlMp4;
});