Video is not showing up in ios os - javascript

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>

Related

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>

React and dynamic src of audio html5

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>
)
}

LightGallery all html5 videos are playing at the same time

I have used lightGallery plugin to play youtube, vimeo, and html5 videos. When a user clicks the image videos should play automatically.
Please check the Demo, It's working fine. But the problem is if there are two html5 videos both are playing at the same time. Youtube videos are not like that. When you click the image one youtube video will play at a time and when you slide to next video, the previous video will pause and the new video will play. But html5 all videos are playing at the same time. Please help.
$(document).ready(function() {
$('#html5-videos').lightGallery({});
});
img {
width: 220px;
height: 150px;
}
ul {
list-style: none;
}
li {
display: initial;
}
<link href="https://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.6/js/lightgallery-all.min.js"></script>
<!-- Hidden video div -->
<div style="display:none;" id="video1">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="https://sachinchoolur.github.io/lightGallery/static/videos/video4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div style="display:none;" id="video2">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="http://sachinchoolur.github.io/lightGallery/static/videos/video2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<ul id="html5-videos">
<!-- Youtube video -->
<li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=yp0a1oZQRVM" data-sub-html="Youtube video first">
<a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg);">
<img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg">
</a>
</li>
<li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=g4o8jfO92CI" data-sub-html="Youtube video second">
<a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/g4o8jfO92CI/0.jpg;">
<img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/g4o8jfO92CI/0.jpg">
</a>
</li>
<!-- Html 5 video -->
<li data-sub-html="video caption1" data-html="#video1">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/videos/h-video3-poster.jpg" />
</li>
<li data-sub-html="video caption2" data-html="#video2">
<img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg" />
</li>
</ul>

I found the answer on GitHub.
https://github.com/sachinchoolur/lightGallery/issues/598
https://github.com/sachinchoolur/lightGallery/issues/524
I updated lg-video.js and it's working fine.

Javascript getAttribute in Edge

I am trying to load videos after the page finishes loading. The script I'm using works in firefox and chrome, but throws errors in Edge/IE.
the error is SCRIPT5007: Unable to get property 'append' of undefined or null reference I get it on the full build and the line it indicates is iframe.id = v[n].getAttribute('youtube'); The issue is that it doesn't add the iframe to the page so no videos. The error on codepen is Unable to get property 'src' of undefined or null reference since the iframe is not getting appended to the page. Here is the html/js I'm currently using. I've tried a few variations like v[n].attr(). I tried changing it to data-youtube and using v[n].dataset.youtube. Nothing seems to work in Edge.
codepen working on ff/chrome
<section data-grid="container stack-2" class="m-multi-feature f-align-center" id="m-multi-tiles">
<section data-grid="container">
<ul role="tablist">
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 13" aria-controls="newIconItemImage13 newIconItemContent13">
<span>Skyworld</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 11" aria-controls="newIconItemImage11 newIconItemContent11">
<span>SteamVR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 12" aria-controls="newIconItemImage12 newIconItemContent12">
<span>SUPERHOT VR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 14" aria-controls="newIconItemImage14 newIconItemContent14">
<span>Free the Night</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 15" aria-controls="newIconItemImage15 newIconItemContent15">
<span>Minecraft</span>
</a>
</li>
</ul>
<ul id="m-multi-description">
<li id="newIconItemContent13" role="tabpanel" class="f-active">
<h4 class="c-heading-10">VERTIGO GAMES</h4>
<h3 class="c-heading">Skyworld</h3>
<p class="c-paragraph">Manage your economy, build and lead royal armies, rule dragons to restore your kingdom to glory. Battle the forces of evil as you conquer and reunite all Skyworlds in this turn-based strategy game that brings the beloved gameplay of strategy classics to VR.</p>
</li>
<li id="newIconItemContent11" role="tabpanel" >
<!-- <h4 class="c-heading-10">Microsoft</h4> -->
<h3 class="c-heading">Steam®VR</h3>
<p class="c-paragraph">Dive into many of the most popular VR games available today. Experience more than 2,000 titles from the Steam®VR library on Windows Mixed Reality.<sup>11</sup></p>
</li>
<li id="newIconItemContent12" role="tabpanel">
<h4 class="c-heading-10">SUPERHOT TEAM</h4>
<h3 class="c-heading">SUPERHOT VR</h3>
<p>
The iconic VR FPS is here; time moves only when you do.
</p>
</li>
<li id="newIconItemContent14" role="tabpanel">
<h4 class="c-heading-10">JAUNT</h4>
<h3 class="c-heading">Free the Night</h3>
<p class="c-paragraph">A magical interactive VR journey that invites you to blow out city lights and return the stars back into the night sky.</p>
</li>
<li id="newIconItemContent15" role="tabpanel">
<h4 class="c-heading-10">MICROSOFT</h4>
<h3 class="c-heading">Minecraft</h3>
<p class="c-paragraph">Get right inside the world of Minecraft with mixed reality. Build, explore and battle mobs - do all the things you know and love - but from a fresh perspective.</p>
</li>
</ul>
<div class="c-carousel f-multi-slide" role="region" aria-label="Images">
<div class="background-skew"></div>
<div itemscope itemtype="http://schema.org/ItemList">
<ul>
<li id="newIconItemImage13" data-f-theme="dark" role="tabpanel" class="f-active">
<picture class="c-image">
<source srcset="assets/video/skyworld.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1400px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1084px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:768px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:540px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:0)">
<img srcset="assets/video/skyworld.jpg" src="assets/video/skyworld.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video3','youtube3')"></a>
</li>
<div id="video3" class="lightbox" onclick="hideVideo('video3','youtube3')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="SN20mKCMEe8" youtube="youtube3">
<!-- <iframe id="youtube3" width="960" height="540" src="https://www.youtube.com/embed/SN20mKCMEe8?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video3','youtube3')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage11" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/steam-vr-1600.jpg" src="assets/video/steam-vr-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video','youtube')"></a>
</li>
<div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube">
<!-- <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video','youtube')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage12" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/superhot-1600.jpg" src="assets/video/superhot-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video2','youtube2')"></a>
</li>
<div id="video2" class="lightbox" onclick="hideVideo('video2','youtube2')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="A1jothqmqHw" youtube="youtube2">
<!-- <iframe id="youtube2" width="960" height="540" src="https://www.youtube.com/embed/A1jothqmqHw?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video2','youtube2')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage14" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/free-the-night.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1400px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1084px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:768px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:540px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:0)">
<img srcset="assets/video/free-the-night.jpg" src="assets/video/free-the-night.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video4','youtube4')"></a>
</li>
<div id="video4" class="lightbox" onclick="hideVideo('video4','youtube4')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="tlKQJcH0mgY" youtube="youtube4">
<!-- <iframe id="youtube4" width="960" height="540" src="https://www.youtube.com/embed/tlKQJcH0mgY?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video4','youtube4')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage15" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/minecraft-thumb.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1400px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1084px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:768px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:540px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:0)">
<img srcset="assets/video/minecraft-thumb-1259.jpg" src="assets/video/minecraft-thumb-1259.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video5','youtube5')"></a>
</li>
<div id="video5" class="lightbox" onclick="hideVideo('video5','youtube5')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube5">
<!-- <iframe id="youtube5" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video5','youtube5')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
</ul>
</div>
</div>
</section>
//lazy load youtube vids
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.id = v[n].attributes['youtube'].value;
v[n].append(iframe);
console.log(v[n].getAttribute('youtube') + 'youtube');
}
});
// Function to reveal lightbox and add YouTube autoplay
function revealVideo(div, video_id) {
var video = document.getElementById(video_id).src;
document.getElementById(video_id).src = video + '&autoplay=1'; // adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div, video_id) {
var video = document.getElementById(video_id).src;
var cleaned = video.replace('&autoplay=1', ''); // removing autoplay form url
document.getElementById(video_id).src = cleaned;
document.getElementById(div).style.display = 'none';
}

I ended up getting it to work by using iframe.setAttribute('id', v[n].getAttribute('youtube')); not sure why this works and not v[n].attributes['youtube'].value;
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.setAttribute('id', v[n].getAttribute('youtube'));
v[n].appendChild(iframe);
}
});

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>

Categories