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>
Related
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>
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.
i have a problem with dymanic src for the tag audio in React project.
If a insert the src manually work. What is the problem?
{this.state.videos.map((item,key)=>
<div class="column is-4" key={key}>
<div class="card has-text-centered">
{item.snippet.title}
<hr/>
{item.snippet.description}
<hr/>
<audio controls>
<source src={item.mp3} />
</audio>
</div>
</div>
)
}
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>
we have developed an app that displays all the videos in our channel.we first display thumbnails, then we click on the thumbnail,we want only the related video of that thumbnail,not all the videos
Angular Code
$scope.isvideoPlaying = false;
$scope.displayvideo = function(){
$scope.isvideoPlaying = true;
}
html code
<div class="list card" ng-repeat="video in videos | filter:searchBox" >
<div class="item item-text-wrap">
<h2>{{video.snippet.title}}</h2>
<p><i class="ion ion-ios-calendar-outline"></i> {{video.snippet.publishedAt }}</p>
</div>
<div class="item item-image">
<img ng-src="{{video.snippet.thumbnails.high.url}}" ng-show="!isvideoPlaying" ng-click="displayvideo()">
<!-- Use 'youtube-video' as an element or attribute. -->
<div class="embed-responsive embed-responsive-16by9" ng-show="isvideoPlaying">
<youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
</div>
</div>
</div>
Do this, (I am assuming 'video.id.videoId' is your video object ID)
$scope.isvideoPlaying = {}
$scope.displayvideo = function(id){
$scope.isvideoPlaying[id] = true;
}
And HTML,
<div class="list card" ng-repeat="video in videos | filter:searchBox" >
<div class="item item-text-wrap">
<h2>{{video.snippet.title}}</h2>
<p><i class="ion ion-ios-calendar-outline"></i> {{video.snippet.publishedAt }}</p>
</div>
<div class="item item-image">
<img ng-src="{{video.snippet.thumbnails.high.url}}" ng-show="!isvideoPlaying[video.id.videoId]" ng-click="displayvideo(video.id.videoId)">
<!-- Use 'youtube-video' as an element or attribute. -->
<div class="embed-responsive embed-responsive-16by9" ng-show="isvideoPlaying[video.id.videoId]">
<youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
</div>
</div>
</div>