We Keep Coding

Video is not showing up in ios os

i have an up loader that uploads the video which is working on all devices and OS but not the iPhone ether the chrome or safari fails to open the video any idea what might be wrong because i checked net and i came up with this solution : in ios the player loads but it does not shows the video with the below solution
<video class="video" playsinline autoplay muted loop>
i did this yet no luck . this is the link i am trying to play video on ios :
https://wishato.com/wish/wStvun
here is my code for video :
<template>
<div class="wishgallery">
<loading :display="loading"></loading>
<div class="gallery" v-show="dataLoaded">
<transition-group name="wish-gallery"
tag="div"
class="gallery-items"
:enter-active-class="enterClass"
:leave-active-class="leaveClass">
<div v-for="(item) in slideShow" :key="item.id" class="gallery-item"
v-show="item.active">
<img v-if="item.mime.match('image')" :src="item.path" alt="wishato" v-on:load="imgLoaded($event)">
<video class="video" controls v-else-if="item.mime=='video/mp4'" poster="">
<source :src="item.path" :type="item.mime">
your browser cant support this format
</video>
</div>
</transition-group>
<div class="navigator" v-if="slideShow.length > 1" :class="[{hidenavigator: navStat}]">
<span class="hideIcon" #click="hidenav">
<i class="icon icon-chevron-down"></i>
</span>
<div class="nav-items">
<div class="nav-cont">
<div v-for="(item) in slideShow" :key="item.id" class="nav-item"
:class="{active : item.active}" #click="changeImage(item.id)">
<img v-if="item.mime.match('image')" :src="item.path" alt="wishato"
v-on:load="imgLoaded($event)">
<div class="video" v-else-if="item.mime.match('video')">
<i class="icon icon-playvideo"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

How to condition an if else statement when the button is clicked and video is playing

I have a three buttons, Trailer, Movies and Movies Ads. I want to play the video dynamically, like when I clicked the button Trailer, then the video trailer must shown, when I clicked the button Movies, then the movie video must shown, and when I clicked the movie ads it must be shown again.
My Buttons
<button class="btn btn-sm btn-dark" id="trailer">Trailer</button>
<button class="btn btn-sm btn-dark" id="movies">Movies</button>
<button class="btn btn-sm btn-dark" id="movieads">Movie Ads</button>
What I have right now under the video as you can see is a simple pseudo code which concludes my logic, is there any way to make this syntax achievable and working? thank you. please see my code below.
<div class="modal" id="myModal2">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="container" id='container'>
<div id="getdata" style='display: none;'>
<div class="overlay">
<br><br><br><br><br>
<div class="container">
<div class="row">
<div class="text-center col-md-12">
<div class="jumbotron" style="background-color: rgba(42, 44, 45, 0.9); color: #71777f">
<h3>Passenger Announcement is Going On.</h3>
</div>
</div>
</div>
</div>
</div>
</div>
----------------------PSEUDOCODE HERE-----------------------------------
<?php
if (trailer == clicked) {
echo '<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/trailer_videos/<?php echo ''.$row2['trailer_video'].''; ?>" type="video/mp4" size="1080">
</video>';
}else if(movies == clicked){
echo '<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/movie_videos/<?php echo ''.$row2['movies_video'].''; ?>" type="video/mp4" size="1080">
</video>';
}else if(moviesAds ==clicked){
echo '<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/movie_ads/<?php echo ''.$row2['movies_video'].''; ?>" type="video/mp4" size="1080">
</video>';
}
?>
</div>
</div>
</div>
</div>
</div>

You can use something like this, put all videos into html and only show them on click.
HTML,PHP:
<ul class="buttons">
<li><button target=".videos .trailer">Trailer</button></li>
<li><button target=".videos .movie">Movie</button></li>
</ul>
<div class="videos">
<div class="trailer">
<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/trailer_videos/<?= $row2['trailer_video'] ?>" type="video/mp4" size="1080">
</video>
</div>
<div class="movie">
<video controls playsinline id="player" width="100%">
<source src="./inflightapp/storage/app/public/movie_videos/<?= $row2['movies_video'] ?>" type="video/mp4" size="1080">
</video>
</div>
</div>
JS:
var buttons = Array.from(document.querySelectorAll('.buttons [target]'));
var videos = Array.from(document.querySelectorAll('.videos > div'));
buttons.forEach(function(button) {
button.addEventListener('click', function(e) {
videos.forEach(function(video) {
video.style.display = 'none';
});
document.querySelector(button.getAttribute('target')).style.display = 'block';
});
});
css:
.videos > div {
display: none;
}

ng-if is not display data in AngularJS

I have images and videos dynamically but I want to display images or videos at a time.
I want to that When i click on images id then it will show images and when i click on video Id then it will show video.
html code:
<div class="container" ng-init="image()">
<div class="row">
<div class="col-md-12" ng-repeat="img in images">
<div class="mySlides" >
<div class="numbertext">{{img.id}}</div>
<img class="size-i" ng-src="{{img.oe_images}}" ng-show="isActive($index)" ng-if="img.type == 'image'" type="image"style="width:100%;">
</div>
<video ng-if="img.type == 'video'" type="video"width="100%" ng-click="video()" id="video" controls="controls" ng-show="isActive($index)">
<source src="./assets/vdo/{{img.oe_images}}" type="video"type="video/mp4">
</video>
</div>
<div class="row">
<div class="col-md-12" >
<a class="prev" ng-click="showPrev()"style="font-size:36px;" >❮</a>
<a class="next" ng-click="showNext()"style="font-size:36px;" >❯</a>
<div class="row paddi" >
<div class="column" ng-repeat="img in images">
<img class="demo cursor border-demo" ng-src="{{img.oe_images}}" ng-if="img.type == 'image'" type="image"ng-show="isActive($index)"style="width:100%; display: block !important;" data="{{img.id}}" ng-click="currentSlide(img.id)" alt="{{img.oe_images}}" type="image">
</div>
<video ng-if="img.type == 'video'" type="video" controls="controls" src="./assets/vdo/{{img.oe_images}}" type="video/mp4" ng-show="isActive($index)"style="width:100%"></video>
</div>
</div>
</div>
</div>
</div>
Here i am using ng-if to display images or Video at a time but after using ng-if no data diplay. Please tell what is my mistake.
thank you in advance

Try to wrap <video>s into <div> containers and apply ng-show instead of ng-if to containers not <video>s:
<div ng-show='condition1'>
<video id='video1'/>
</div>
<div ng-show='condition2'>
<video id='video2'/>
</div>

Check this topic. Look the first answer about trustAsResourceUrl.
Perhaps, it will resolve your issue.
app.filter("trustUrl", ['$sce', function ($sce) {
return function (recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}]);
In HTML - view file:
<video src="{{ Your_URL | trustUrl }}" videoplayer controls></video>

My Javascript only works on one element in a python embedded for loop in Django2

I'm iterating these html template cards using Python for loop and I have a javascript to go with it. The problem is that the javascript is only working on the first element (the script is basically getting the seeked position of the audio) and not the rest. I thought it was because I set an id of the template card instead of a class name, but I am still getting the same results. The Javascript is in the for loop. Maybe it shouldn't? Anyways here is my code:
{% for song in songs %}
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" id="img_size"
src="{{ song.song_image.url }}"
alt="Card image cap">
<div class="my-header">
<h3 id="song_title">{{ song.song_title }}</h3>
<span id="pub_date">{{ song.publishing_date }}</span>
</div>
<div style="clear:both"></div>
<hr />
<div class="card-body">
<p class="card-text">{{ song.song_description }}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<audio class="myAudio" controls>
<source src="{{ song.song_file.url }}" type="audio/mpeg">
<source src="{{ song.song_file.url }}" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
var vid = document.getElementsByClassName("myAudio");
function getCurTime() {
alert(vid.currentTime);
}
function setCurTime() {
vid.currentTime=5;
}
</script>
</div>
</div>
</div>
</div>
</div>
{% endfor %}

No the JavaScript shouldn't be in the loop.
In your loop you're not creating unique identifiers for your audio elements. An easy way to do so could be done by using {{ forloop.counter }} in the class (or any other) attribute of your audio tag, and then call it in your JavaScript.
Please let me know if you need more help.

How to load a mp3 link into an audio player on a click

I'm trying to find a way to load an mp3 file when I click on a div called 'front-start-play' and loads the mp3 into audio-player. I'm not familiar with data-rel and I looked at other questions that are similar but they deal with the link of the url already in the code where as this is going to be used on a site with 10+ posts with different urls and need to be loaded into the play when they are clicked.
HTML:
<div class="front-start-play" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> Load "Song1" </div>
<div class="audio-player-wrapper">
<div class="mejs__button mejs__group-left">
<div class="rewind-btn">
<button title="Rewind 15 seconds">15</button>
</div>
<div class="playpause-btn">
<button title="Play" class="play" id="ppbtn"></button>
</div>
<div class="forward-btn">
<button title="Forward 15 seconds">15</button>
</div>
</div>
<div class="current-time">00:00</div>
<div class="duration-time">00:00</div>
<div class="mejs__button mobile-mute">
<button class="mobile-mute-btn mobile-mute-off"></button>
</div>
<audio width="100%" height="75px" id="audio-player" src="" type="audio/mp3" controls="controls"></audio>
</div>
JS:
$(".front-start-play").click(function(){
var mp3Url = $(this).data('rel');
$("#audio-player").load();
});

Instead of:
$("#audio-player").load();
you need to set the audio source:
$("#audio-player").attr('src', mp3Url);
$(".front-start-play").click(function(){
var mp3Url = $(this).data('rel');
$("#audio-player").attr('src', mp3Url);
});
$(".front-start-play").trigger('click');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="front-start-play" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> Load "Song1" </div>
<div class="audio-player-wrapper">
<div class="mejs__button mejs__group-left">
<div class="rewind-btn">
<button title="Rewind 15 seconds">15</button>
</div>
<div class="playpause-btn">
<button title="Play" class="play" id="ppbtn"></button>
</div>
<div class="forward-btn">
<button title="Forward 15 seconds">15</button>
</div>
</div>
<div class="current-time">00:00</div>
<div class="duration-time">00:00</div>
<div class="mejs__button mobile-mute">
<button class="mobile-mute-btn mobile-mute-off"></button>
</div>
<audio width="100%" height="75px" id="audio-player" src="" type="audio/mp3" controls="controls"></audio>
</div>