I'm using HTML5 video player and custom controls button.
Here is my HTML structure:
<video width="840" id="video">
<source src="{{box.video}}" type="video/mp4">
</video>
<div class="controls">
<button class="play" ><i class="fa fa-play" aria-hidden="true"></i></button>
JS code:
$(".play").click(function() {
$(this).closest("video")[0].play();
});
When I click play button, its getting undefined error. Whats the problem? How can I fix it?
The issue is because the video is not a parent of the .play button which gets clicked. Given your HTML sample, you need to use closest() to get the .controls div, then prev() to get the video, like this:
$(".play").click(function() {
$(this).closest('.controls').prev('video')[0].play();
});
<video width="840" id="video">
<source src="{{box.video}}" type="video/mp4">
</video>
<div class="controls">
<button class="play">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
</div>
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 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;
}
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 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.
<script type="text/javascript">
function playVideo(sourceId, targetId) {
if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
targetId.innerHTML=sourceId.innerHTML;
return false;
}
</script>
<video id="6" width="320" height="240" controls="controls"></video>
<video id="1" style="display: none;"width="320" height="240" controls="controls">
<source src="movie1.mp4" type="video/mp4" />
<source src="movie1.ogg" type="video/ogg" />
<source src="movie1.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<video id="2" style="display: none;" width="320" height="240" controls="controls">
<source src="movie2.mp4" type="video/mp4" />
<source src="movie2.ogg" type="video/ogg" />
<source src="movie2.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<a href="#" onclick='return playVideo("1","6")'>Play Video 1</a>
<a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>
When selecting "Play Video 2" while Video 1 is playing video 2 will not work, how can i resolve this? Is there additional script I have to add so that the second video will override the first?
<script type="text/javascript">
function playVideo(sourceId, targetId) {
if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
targetId.innerHTML=sourceId.innerHTML;
return false;
}
</script>
<div id="6"></div>
<div id="1" style="display: none">
<video width="320" height="240" controls="controls">
<source src="movie1.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<div id="2" style="display: none">
<video width="320" height="240" controls="controls">
<source src="movie2.avi" type="video/avi" />
Your browser does not support the video tag.
</video>
</div>
<a href="#" onclick='return playVideo("1","6")'>Play Video 1</a>
<a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>
What I did: I placed the two video elements within invisible divs. Those divs have ids (1 & 2) and the content of those divs (your video elements) are loaded into a third (visible) div with id 6.
The way your playVideo function works is...not intuitive.
Use videoElement.play(); to play a video. For example, document.getElementById('1').play();. To stop a video from playing, use stop();
Tutorial / docs