I have multiples video elements streaming webcam of various users. When i click on a specific video element it should open a video modal showing the stream of that particular user. I have tried giving the id of that particular stream to the modal, but there can be only one id in a single html page. Please help me as i am new to this.
multiple video elements
<div *ngFor="let el of videoElements; let i = index" class=" embed-responsive embed-responsive-16by9 col-xs-6">
<video class="img-responsive embed-responsive-item mt-md" id='{{el.id}}'
[attr.muted]="i == 0 ? 'muted' : null" style="border: 2px solid #e3e3e3;"
(click)="enlargeVideo(el.id)"></video>
</div>
the modal
<div id="enlargeVideoModal" class="modal" data-easein="flipYIn" tabindex="-1" role="dialog"
aria-labelledby="costumModalLabel" aria-hidden="true">
<video class="img-responsive embed-responsive-item mt-md" id={{largeVideoId}}
style="border: 2px solid #e3e3e3;"></video>
</div>
function for opening the modal
enlargeVideo = (id: any) => {
$('div.popup-messages').click(function () {
var id = $(this).attr('id');
});
this.largeVideoId = id;
$('#'+id).remove();
$('#' + id).removeAttr('id');
$('#enlargeVideoModal').modal({
show: 'true'
});
if (this.IsEnlargeVideo === false) {
this.IsEnlargeVideo = true;
} else {
this.IsEnlargeVideo = false;
}
}
Related
I have 3 tabs in my application, as below:
<li ng-class="{ active: isActive('#one')}"><a data-toggle="tab" class="tab-txt-color" href="#one" ng-click="selectTab('fruits')">Fruits</a></li>
<li ng-class="{ active: isActive('#two')}"><a data-toggle="tab" class="tab-txt-color" href="#two" ng-click="selectTab('veggies')">Veggies</a></li>
<li ng-class="{ active: isActive('#three')}"><a data-toggle="tab" class="tab-txt-color" href="#three" ng-click="selectTab('decors')">Decors</a></li>
.js
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
For above code, when any of the tab is clicked it gets highlighted.
But I have previous and next buttons added to the content of above tabs. How do I make the respective tab active when clicked on previous button.
<div>
.......
......
....(content of Veggies tab)
[End of this tab there are 2 buttons]
<div class="col-md-12 col-lg-12" style="margin-top:20px;" align="right">
<img src="core/static/images/previous-btn.gif" border="0" ng-click="selectTab('fruits')">
<img src="core/static/images/next-btn.gif" border="0" ng-click="selectTab('decors')">
</div>
Please help. thanks in advance!
I have an answer if you need the next and previous actions should work on sequence.
Add an array of tabs with its names and a variable to store the current tab name
$scope.tabs = ["fruits","veggies","decors"];
$scope.currentTab = "";
Add 2 more methods for Previous and Next button click
$scope.nextTab = function(){
if($scope.currentTab == ""){
$scope.selectTab(tabs[0]);
}
else {
var index = $scope.tabs.indexOf($scope.currentTab);
var nextIndex = ((index + 1) < $scope.tabs.length) ? (index+1) : 0;
$scope.selectTab($scope.tabs[nextIndex]);
}
}
$scope.prevTab = function() {
if($scope.currentTab == ""){
$scope.selectTab(tabs[0]);
}
else {
var index = $scope.tabs.indexOf($scope.currentTab);
var prevIndex = ((index == 0) ? ($scope.tabs.length - 1) : (index-1);
$scope.selectTab($scope.tabs[prevIndex]);
}
}
Add one more line in selectTab method to store current tab name
$scope.selectTab = function(tab){
//other functionalities
//add this line
$scope.currentTab = tab;
}
Update click methods in Next and Previous buttons
<img src="core/static/images/previous-btn.gif" border="0" ng-click="prevTab()">
<img src="core/static/images/next-btn.gif" border="0" ng-click="nextTab()">
Hope it will help you.
I wrote a few lines code to stream a video. In my code, I'm calling an API to get a link, and that link setting in the src of the video tag and trying to play. And my HTML5 video player works very fine in windows, android, and MAC chrome. Now I just need to play in iPhone/ iPad
HTML code
<video #video playsinline controls="controls" poster="{{imageName}}" preload="metadata" width="100%"
height="250" type="video/mp4">
<source #src [src]="videolink" type=video/mp4>
Your browser does not support HTML5 video.
</video>
<!-- Custom controller -->
<div id="video-controller-id" class="video-controller" fx fxLayoutAlign="space-between center">
<div controls="controls">
<mat-slide-toggle checked={{isToggle}} (change)="toggle($event)">{{cameraStatus}}</mat-slide-toggle>
</div>
<div fxLayout="row">
<div fxLayout="row" class="volume">
<mat-icon matTooltip="{{muteStatus}}" matTooltipHideDelay="500" matTooltipPosition="above"
style="cursor: pointer; color: white;" (click)="videoVolume()">
{{volume}}</mat-icon>
<input #volumeSlider class="volume-slider" id="volumeSlider" type="range" min="0" max="100"
value="50" step="1" (input)="videoVolumeSlider(volumeSlider.value)">
</div>
</div>
<div>
<mat-icon style="cursor: pointer; color: white;" (click)="fullScreen()">fullscreen
</mat-icon>
</div>
</div>
Typescript code
#ViewChild('video') videoTag: ElementRef;
#ViewChild('video') srcTag: ElementRef;
isToggle: boolean = false;
videolink: any;
toggle(event: MatSlideToggleChange) {
this.video = document.getElementById("video");
if (event.checked) {
this.isToggle = true;
this.isProgressBar = true;
this.titleVisibility = "visible";
this.cameraStatus = "CAMERA ON";
this.stationService.getCameraUrl(this.stationId, "mp4").subscribe(
data => {
var urlData = data as any;
this.videolink = urlData.url;
this.srcTag.nativeElement.setAttribute('src', this.videolink);
this.videoTag.nativeElement.load();
var playPromise = this.videoTag.nativeElement.play();
if (playPromise != null) {
this.isProgressBar = false;
}
},
error => {
console.log(error);
});
} else {
this.isProgressBar = false;
this.videoTag.nativeElement.pause();
this.titleVisibility = "hidden";
this.cameraStatus = "CAMERA OFF"
}
}
My stream audio is aac and video is H.264 .Could you please help me how to solve this issue.
I have created a carousel following a tutorial from a website. Here is the html code of my carousel;
<div class="row carousel" (mouseover)="mouseCheck()">
<!-- For the prev control button -->
<button class="control" style="left: 30px;" (click)="prevButton()">
<span class="arrow" style="transform: rotate(45deg);"></span>
</button>
<div class="row car-align">
<div *ngFor="let i of currentSlide;" style="width: 184px;" class="card CardBtw">
<div #carouselAnimation>
<!-- SOME CODE IN HERE -->
</div>
</div>
</div>
<!-- For the control buttons -->
<button class="control" style="right: 30px;" (click)="nextButton()">
<span class="arrow" style="transform: rotate(225deg);"></span>
</button>
</div>
I have succesfully implemented an animation. What I want is to let this carousel cycles in every 10 seconds, while the mouse is not on the carousel. If user puts the mouse on the carousel, then let this 10 seconds start from beginning. I have implemented a function called "mouseCheck()" to detect if mouse is on this . But I couldnt manage to make a cycle in every 10 seconds. How can I do that?
EDIT:
Here are the codes that you all wanted. My mouseover function just console logs when mouse is on (I have created it but couldnt fill it because I couldnt track the time :/ )
I select and hide the showing vector with the help of next and prev button. Here is the function from .ts (Just the next button func, cus prev is similar to this anyways);
//Start from the first vector
currentSlide = this.laptopSlide[0];
nextButton() {
//If the currentSlide is 0
if(this.currentSlide == this.laptopSlide[0])
this.currentSlide = this.laptopSlide[1]
//If currentSlide is 1
else if(this.currentSlide == this.laptopSlide[1])
this.currentSlide = this.laptopSlide[2]
//If current slide is 2
else if(this.currentSlide == this.laptopSlide[2])
this.currentSlide = this.laptopSlide[0];
}
you can create setTimeout function on mouseCheck() fn.
mouseCheck() {
if (condiction1 or click == true){
on.click() => {
"Give me a function conditione"
}
}else {
setTimeOut({
console.log("Change by inner content from typescript code on my component")
}, 2000)
}
i have a drop down menu with 2 options img and videos, i have to display the data with respect to my drop down selection, so how can i achieve this please help me.
here is my HTML code :
<img class="cat-img" src="image path" style="width: 100px;margin: 10px 0px;">
or
<video width="320" height="240" controls> <source src="videopath" type="video/mp4">
</video>
or how can i do this using 'ng if' please
Using `ng-if`
select dropdown
<select ng-model='option'>
<option value='image'>Image</option>
<option value='video'>Video</option>
</select>
Change your image/video code to this
<img class="cat-img" src="image path" style="width: 100px;margin: 10px 0px;" ng-if="option=='image'">
<video width="320" height="240" controls> <source src="videopath" type="video/mp4" ng-if="option=='video'"></video>
If you want a single line for both this image/video better write a component for this.
With 'bootstrap' you could do a 'collapsible' accordion
Check this demo: https://jsfiddle.net/qq37qbdh/
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#videos">
Videos</a>
</h4>
</div>
<div id="videos" class="panel-collapse collapse in">
<div class="panel-body">
videos section
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#images">
Images</a>
</h4>
</div>
<div id="images" class="panel-collapse collapse">
<div class="panel-body">
Images Section
</div>
</div>
</div>
</div>
Here's a solution that worked for me. Typically, your video/image is coming from a URL and is assigned to src, and in my case, they were not local and static, but rather came from IPFS, but could come from any URL. I created a simple obj array in JSON:
export interface media{'src': string, 'type': string}
var myMedia: media[] = [];
and then as I filling the 'src' part of each obj in my array, I did a little MIME check in a service function that calls a promise "mediaType"...
for(var x=0; x < myMedia.length; x++){
if(myMedia[x].src!=null){
this.mediaType(x, myMedia[x].src).then(function(data){
myMedia[data.index].type = data.ret;
}.bind(this)).catch( err => {
console.log('error: ' + JSON.stringify(err));
});
} else {
myMedia[x].mediaType = null;
//handle condition where src was null for some reason;
}
}
...and here's the mediaType promise...
mediaType(index: number, URL: string){
return new Promise((resolve, reject) => {
fetch(URL, {method:'HEAD'})
.then(response => {
if (!response.ok) {
throw new Error(response.statusText)
}
var ret = response.headers.get('content-type');
resolve({'ret': ret, 'index': index});
},
(err) => {
reject({error : err});
}
)
})
}
The index # allowed the for loop to spin ahead asynchronously, and still apply the value to the correct array element. Now inside your HTML *ngFor look, your element 'media' of myMedia can look like this...
<img
class="w-full object-cover"
[src]="media.src" *ngIf="token.mediaType!=null && token.mediaType.split('/', 2)[0]=='image'">
<video
class="w-full object-cover" controls
[src]="media.src" *ngIf="token.mediaType!=null && token.mediaType.split('/', 2)[0]=='video'">
</video>
The split will allow for any image or video MIME to work (example: image/png vs. image/jpg, or video/mp4 vs video/mov).
Regarding the audio on this page: http://ebonytay.com/site/composer.php?clip=getOutOfTown#mediaplayer
The audio controls show up in Chrome and Safari (and in Firefox locally. I'm having problems with a specific live server working but that's irrelevant). In IE9 however, the audio control is invisible. The music is still playing and if you right click on where it's suppose to be, you can play/pause it, it just doesn't show up.
I've tried messing with the z-index. I've tried putting it outside all the divs. I've tried using src= instead of source. I've tried using controls instead of controls="controls". I've tried using the audio tag directly sourcing the file, without any PHP/Javascripting. I'm fairly new to programming so I'm sure some of the code could be written simpler, but it shouldn't be breaking anything. Any help would be appreciated.
Here is all the code for the audio player (not incl. css) on the page:
<?php
$song = "overtureRedRockRise"; // set to starting song
$autoplay = ""; // disable autoplay on page load
$totalSlides = 1; //default amount of slides
$initialSlide = 1; //default starting slide
// Change song to URL parameter defined by links in #clip_nav div
if (isset($_GET["clip"])) // if URL parameter is ?clip=foo
{
$song = $_GET["clip"]; // $song is foo
$autoplay = "autoplay='autoplay'"; // enable autoplay when changing song
}
// Check how many slideshow images exist for current song
while (file_exists("../audio/filmClip_" . $song . "_" . $totalSlides . ".jpg"))
{
$totalSlides++;
}
$totalSlides--; // subtract 1 to get total number of slides for current song
?>
<script>
$(document).ready(function() {
var currentSlide = 1; //default starting slide
var totalSlides; //number of slides for current song
var song; //current song
var slideSpeed; //current slideshow speed
// Get variables from PHP
totalSlides = <?php echo $totalSlides ?>;
song = "<?php echo $song ?>";
// Setup slideshow speeds in milliseconds using JSON
var songSpeed =
[
['overtureRedRockRise',12000],
['getOutOfTown',7000],
['canyonBaby', 5000],
['celestialGuides', 10000],
['springback', 11000],
['hallelujas', 10000],
['myOnly', 8000],
['selfDefense', 10000],
['orchestral', 10000]
]
//go through each song in array
for (i = 0; i < 9; i++)
{
//find the current song
if (song == songSpeed[i][0])
{
//set current slideshow speed
slideSpeed = songSpeed[i][1] + 1000; //add 1 second for loading time
}
}
// Setup slideshow
function changeSlide()
{
// change current slide number
currentSlide++;
// Loop slideshow
if (currentSlide > totalSlides) { currentSlide = 1; }
// Display current slide
$('.song_image').attr('src', '../audio/filmClip_' + song + '_' + currentSlide + '.jpg');
}
// If song has more than 1 image
if (totalSlides > 1)
{
// Play slideshow
setInterval(changeSlide, slideSpeed);
}
// Indicate current song
$('div.filmClip_list.'+song).addClass('currentSong');
});
</script>
<h2><a id="mediaplayer"> SCORE AUDIO LIBRARY</a></h2>
<div id="audio_clips">
<!-- Song List -->
<div id="clip_nav">
<div class="filmClip_list overtureRedRockRise">Overture - Red Rock Rise</div>
<div class="filmClip_list getOutOfTown">Get Out of Town Firehorse</div>
<div class="filmClip_list canyonBaby">Lady Sedona Vortex</div>
<div class="filmClip_list celestialGuides">Celestial Guides</div>
<div class="filmClip_list springback">Springbank Park / Lawson Road</div>
<div class="filmClip_list hallelujas">Hallelujahs</div>
<div class="filmClip_list myOnly">My Only</div>
<div class="filmClip_list selfDefense">Self Defense</div>
<div class="filmClip_list orchestral">The Return of the Chevalier <i>(orchestral)</i></div>
</div><!-- end #clip_nav-->
<!-- Slideshow -->
<div id="image_holder">
<img class="song_image" src="../audio/filmClip_<?php echo $song ?>_<?php echo $initialSlide ?>.jpg" width="600" height="400" alt="Slideshow" />
</div><!-- end #image_holder-->
<!-- Audio -->
<div id="audio_player">
<audio controls="controls" preload="auto" <?php echo $autoplay ?>>
<source src="../audio/filmClip_<?php echo $song ?>.ogg" type="audio/ogg" />
<source src="../audio/filmClip_<?php echo $song ?>.mp3" type="audio/mpeg" />
Your browser does not support audio. Please upgrade your internet browser to the latest version here.
</audio>
</div><!-- end #audio_player -->
</div><!-- end #audio_clips -->
It's this rule in style_2011.css:
body.composer audio {
height: 32px;
width: 100%;
}
Specifically, if you set height to 45px or more then the controls will appear.
Just remove the height of the audio tag.