I am trying to embed a video file from a url using jPlayer.
This is the code i am using.This works totally fine in the chrome and Firefox but not in Internet Explorer 7,8 or 9.Video box is shown and it shows an error message under the video box.
jPlayer Developer Guide says that it supports IE 7 and above.
So What can be the issue?
I tried html5 vidoe tag for this but IE 8 and below versions doesn't support that also.
<html>
<head>
<!--Stylesheets-->
<link rel="stylesheet" href="css/styles.css"/>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--jPlayer-->
<script src="js/jquery.jplayer.min.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<div style="margin-left:50px;" >
<a href="https://www.google.com">
<img src="back.jpg" width="64px" height="64px" alt=""/>
</a>
</div>
<!--container for everything-->
<div id="jp_container_1" class="jp-video jp-video-360p">
<!--container in which our video will be played-->
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<!--main containers for our controls-->
<div class="jp-gui">
<div class="jp-interface">
<div class="jp-controls-holder">
<!--play and pause buttons-->
play
pause
<span class="separator sep-1"></span>
<!--progress bar-->
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"><span></span></div>
</div>
</div>
<!--time notifications-->
<div class="jp-current-time"></div>
<span class="time-sep">/</span>
<div class="jp-duration"></div>
<span class="separator sep-2"></span>
<!--mute / unmute toggle-->
mute
unmute
<!--volume bar-->
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"><span class="handle"></span></div>
</div>
<span class="separator sep-2"></span>
<!--full screen toggle-->
full screen
restore screen
</div><!--end jp-controls-holder-->
</div><!--end jp-interface-->
</div><!--end jp-gui-->
<div class="jp-no-solution">
<span>Update Required</span>
Here's a message which will appear if the video isn't supported. A Flash alternative can be used here if you fancy it.
</div>
</div><!--end jp_container_1-->
<!--instantiate-->
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
webmv: "Big_Buck_Bunny_Trailer.webm",
poster: "Big_Buck_Bunny_Trailer_480x270.png"
});
},
swfPath: "js",
supplied: "webmv",
size: {
width: "570px",
height: "340px",
cssClass: "jp-video-360p"
}
});
});
</script>
</body>
</html>
Internet Explorer does not support WebM video format.
In this case, JPlayer uses "Flash Fallback" method i.e it uses Flash Player for stream an unsupported video format.
So, for visualize your WebM video in Internet Explorer, you need Flash Player installed.
Related
I am trying to create a script that only opens the next div called .video-overlay.
I do not want to use ID's as there could be up to 30 videos per page.
JS Fiddle: https://jsfiddle.net/w2fqrzbw/
At the moment the script is affecting both... is there a way of targetting the next div named .video-overlay?
HTML:
<span class="video-trigger">Button 1 </span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 1
</div>
</div>
<!-- Close video popup-->
<br><br/>
<br><br/>
<br><br/>
<span class="video-trigger">Button 2</span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 2
</div>
</div>
<!-- Close video popup-->
JS:
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$('.video-overlay').fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});
This is how it is laid out in my actual web document:
<div class="col span_6_of_12 ripple-me">
<div class="video-thumbnail" style="background-image: url(<?php echo $video_thumbnail; ?>);">
<span class="video-trigger">
</span>
</div>
<!--Close Video box cta -->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
<iframe allowFullScreen='allowFullScreen' src="<?php echo $video_link; ?>" width="960" height="370" allowtransparency="true" style='position:absolute;top:0;left:0;width:100%;height:100%;' frameborder="0"></iframe>
</div>
</div>
<!-- Close video popup-->
</div>
The issue with your current logic is that it's affecting all .video-overlay elements on click. To fix this you can use DOM traversal to find only the one related to the clicked .video-trigger using next() and closest(). Try this:
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).next('.video-overlay').fadeIn(300).find('video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).closest('.video-overlay').fadeOut(300).find('video').get(0).pause();
});
});
Try using JQuery Next Function :
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
var $videoOverlay = $(this).next('.video-overlay');
videoOverlay.fadeIn(300);
videoOverlay.find('video').get(0).play();
});
});
jQuery provides powerful DOM traversal tools. Be sure to use them
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).parent().next('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).parent().fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});
I know that the YouTube API does not provide functionality to display a playlist sidebar similar to the native YouTube playlist at this time.
Through searching I found a promising plugin to imitate this behavior. https://github.com/jakiestfu/Youtube-TV
Unfortunately, this plugin no longer works with YouTube's API v.3, however, Giorgio003 created a fork with API v.3 support.
https://github.com/Giorgio003/Youtube-TV
I have followed all the installation instructions, but cannot seem to get it to work.
This is my page:
<!DOCTYPE html>
<html>
<head>
<link href="src/ytv.css" type="text/css" rel="stylesheet" />
<script src="src/ytv.js" type="text/javascript"></script>
</head>
<body>
<div>
Testing YouTube Playlist
</div>
<div id="YourPlayerID"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var controller = new YTV('YourPlayerID', {
channelId: 'UCBSvZIJlXJR7SE_KNvOiiGg'
});
});
</script>
</body>
</html>
In ytv.js I included my API key
(function(win, doc) {
'use strict';
var apiKey = 'ThisIsARealKeyForMyChannel';
var YTV = YTV || function(id, opts){...
The ytv.js script seems to be running fine. It correctly finds my channel and the two sample videos I have uploaded. The rendered HTML for #YourPlayerID looks like this:
<div id="YourPlayerID" class="ytv-canvas">
<div class="ytv-relative">
<div class="ytv-video">
<iframe id="ytv-video-playerYourPlayerID0" class="ytv-video-playerContainer" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/VqWWn-NrebU?enablejsapi=1&origin=http%3A%2F%2Fdevcf9.acm.org&controls=1&rel=0&showinfo=0&iv_load_policy=3&autoplay=0&theme=dark&wmode=opaque&widgetid=1"></iframe>
</div>
<div class="ytv-list">
<div class="ytv-list-header">
<a href="//youtube.com/channel/UCBSvZIJlXJR7SE_KNvOiiGg" target="_blank">
<img src="https://yt3.ggpht.com/-IGpxPi95eQQ/AAAAAAAAAAI/AAAAAAAAAAA/z-D0JYX_Wog/s88-c-k-no-mo-rj-c0xffffff/photo.jpg">
<span><i class="ytv-arrow down"></i>My Name</span>
</a>
</div>
<div class="ytv-list-inner">
<ul>
<li class="ytv-active">
<a href="#" data-ytv="VqWWn-NrebU" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:42</span>
<img src="https://i.ytimg.com/vi/VqWWn-NrebU/mqdefault.jpg">
</div>
<div class="ytv-content">
<b>Skin 4144</b>
<span class="ytv-views">1 Views</span>
</div>
</a>
</li>
<li>
<a href="#" data-ytv="bAWFo5ur9fc" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:16</span>
<img src="https://i.ytimg.com/vi/bAWFo5ur9fc/mqdefault.jpg">
</div>
<div class="ytv-content"><b>Nebula 6044</b>
<span class="ytv-views">0 Views</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
But no video or playlist appears on the page. Can anyone see what I am missing?
I was able to solve the problem. All the elements created from the plugin set the height to 100%. The element <div id="YourPlayerID"></div> had a height of 0, therefore, all its children had a height of 0. Once I gave the #YourPlayerID element a height the playlist appeared.
I am having trouble figuring out how to stop a iframe video from playing when I close the modal window. I have seen a lot of answers mention YouTube and using their API but these videos are not from YouTube. I have seen some questions already asked on this subject, ex: Stop all playing iframe videos on click a link javascript. I just don't really understand how to incorporate this into my code.
Question
How can I stop a iframe video from playing when the user closes the modal window. To close each modal window, I use <div class=close-animatedModal>.
If it matters, I am using Wordpress.
Test Page - http://johnmartinagency.com/test-page-2/
HTML
<a id=demo01 href=#animatedModal> <!-- This targets the specific modal -->
<div class=play-container><div class=play-button></div>
</div>
</a>
<div class="mdl-card__title auto-insurance"> <!-- Google Material Design Lite Card -->
<h2 class=mdl-card__title-text>Auto Insurance Made Easy</h2>
</div>
<div class="mdl-card__actions mdl-card--border"> <a id=demo01-a href=#animatedModal class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Watch Video</a> <!-- The play button -->
</div>
<div class=video-length>(5:21)</div>
</div>
<div id=animatedModal> <!-- The Modal Container -->
<div class=modal__box>
<div class=close-animatedModal> <!-- Close modal ->>
<i class="fa fa-times fa-2x close-icon"></i>
</div>
<div class=h_iframe> <!-- The iframe -->
<img class=ratio src=http://placehold.it/16x9>
<iframe src="//fast.wistia.net/embed/iframe/rnx2undr9h?videoFoam=true" allowtransparency=true frameborder=0 scrolling=no class=wistia_embed name=wistia_embed allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen align=center></iframe>
<script src=//fast.wistia.net/assets/external/E-v1.js></script>
</div>
</div>
</div>
</div>
Javascript
I am using animate.modal.js for the modal animation
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js> </script>
<script src="http://sogomarketingagency.com/wp-content/themes/Avada-Child-Theme/js/animatedModal.min.js?ver=4.1.1"></script>
<script>
$("#demo01, #demo01-a").animatedModal ({
modalTarget:"animatedModal",
animatedIn:"zoomIn",
animatedOut:"bounceOut",
color:"rgba(0, 0, 0, 0.95)",
overflow:"scroll"})
</script>
Add this to your script, in the document ready function:
jQuery(function () {
jQuery().on("click", function () {
jQuery('iframe').contents().find('video').each(function () {
this.currentTime = 0;
this.pause();
});
});
});
This solution seems to be working.
Add this JS after you have loaded the above script (just before the closing body tag)
<script type="text/javascript">
$('#myModal').on('hidden.bs.modal', function () {
var videos = $('#video');
video.pause()
});
</script>
Accepted Answer is here
I hate using these because I can never find a tutorial for them.
I have a jPlayer that I am trying to use to play .flv video files. I have been looking for a tutorial on how to use jPlayer but everything I can find is either complete garbage, or does not show any code what so ever, just the end product (very helpful, I know).
Here is how I make my jPlayer:
//Creates the JPlayer for that video
$('#videoPlayerDiv').jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
flv: videoLocation
}).jPlayer("play");
},
supplied: "flv",
swfPath: "jPlayer/js"
});
videoLocation is a location to each video file. I have already tested the location and it is correct. When I run the page I get the video box to show up, but I cannot get it to play, or show any video file location.
If anyone can find an issue (or a tutorial) that would help me out a lot.
Try this:
$('#videoPlayerDiv').jPlayer({
ready: function () {
this.element.jPlayer("setFile","path/to/flv/video/file.flv");
}
});
EDIT:
OP decided to use flowplayer instead of jPlayer.
here is another answer that worked for me:
<!DOCTYPE html>
<link href="http://jplayer.org/latest/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://jplayer.org/2.1.0/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
/*paste or reference your JS here*/
</script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<!-- comment out any of the following <li>s to remove these buttons -->
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<!-- you can comment out any of the following <div>s too -->
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
</div>
<div class="jp-title">
<ul>
<li>Cro Magnon Man</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
flv:"http://www.website.com/videos/training_videos/Buying_Online_vs_Buying_From_Talent_Advisor.flv"
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "flv"
});
});
I have put together a d3 visualisation on codepen where it runs as planned:
https://codepen.io/MrVincentRyan/pen/oJLNrV?editors=1010
However when I add additional styling with HTML and CSS the line element no longer appears:
https://codepen.io/MrVincentRyan/pen/VqKLbm?editors=1010
HTML:
<head>
</head
<body>
<div class="intro">
<div class="flexwrap">
<div class="headline">
<div class="topline">
<!-- <time class="date">01.03.2018</time> -->
<h1 class="title">The sound of the pound</h1>
<h3 class="introtext">From flash crashes, to snap elections, the pound has been rattling around currency markets as Brexit threatens to play a new tune with the UK's economy.</h3>
</div>
<div id="audioviz">
<button id="buttons" onclick="playAudio()" id="start">Start</button>
<button id="buttons" onclick="audio.stop()" id="reset">Reset</button>
</div>
<audio id="myAudio">
<source src="https://res.cloudinary.com/dxeddkkwh/video/upload/v1544798173/1544797413_5gbSBNViC81pMgpVitW7.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
<div class="annotation-list layout-small" id="surveychart-annotations">
<div class="flexwrap">
<div class="annotation-list__item">
<div class="annotation-list__number">1</div>
<div class="annotation-list__text">
<h3>Brexit referendum June 23 2016</h3>
<div class="annotation-list__img-box"><img class="annotation-list__img" src="https://cdn.pixabay.com/photo/2018/07/31/16/06/brexit-3575384_1280.jpg"/></div>
<p>Following the vote for Brexit on June 23 the pound plunged <strong>from $1.43</strong> the week before the Brexit vote <strong>to $1.36</strong> as the market panicked following the result. <strong>David Cameron</strong> the Prime Minister resigned and Theresa May emerged as an unlikely leader to see Brexit through.</p>
Do you see an issue with this line of HTML code?
<button id="buttons" onclick="playAudio()" id="start">Start</button>
Multiple IDs? Change it to either a class or a data-attribute or anything else other than a second ID and it'll work.
A fork: https://codepen.io/anon/pen/yGameg