Ok so there is this amazing video player called plyr.io
I was so impressed by it and I downloaded it from Github and everything, I barely know code. I am early into the html and css. I know NOTHING about javascript. Anyways after downloading it and everything, I got to this point.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Plyr Demo</title>
<link rel='stylesheet' href='https://cdn.plyr.io/3.4.6/plyr.css'>
<style>
.container {
max-width: 800px;
margin: 0 auto;
}
.plyr {
border-radius: 4px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<video controls crossorigin playsinline
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.jpg" id="player">
<!-- Video files -->
<source
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4" type="video/mp4" size="720">
<!-- Caption files -->
<track kind="captions" label="English" srclang="en"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.en.vtt"
default>
<track kind="captions" label="Français" srclang="fr"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video>
element -->
<a
href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
576p.mp4" download>Download</a>
</video>
<script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
// This is the bare minimum JavaScript. You can opt to pass no arguments
to setup.
const player = new Plyr('#player');
// Expose
window.player = player;
// Bind event listener
function on(selector, type, callback) {
document.querySelector(selector).addEventListener(type, callback,
false);
}
// Play
on('.js-play', 'click', () => {
player.play();
});
// Pause
on('.js-pause', 'click', () => {
player.pause();
});
// Stop
on('.js-stop', 'click', () => {
player.stop();
});
// Rewind
on('.js-rewind', 'click', () => {
player.rewind();
});
// Forward
on('.js-forward', 'click', () => {
player.forward();
});
});
</script>
</body>
</html>
But when I actually try to replace
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4
Whenever I replace it with a video link of my own, The video player just doesn't work, I have tried so many things and it just wouldn't work unless its the actual video of plyr.io
its free to use meaning the code doesn't violate copyright, tell me if i am wrong. the website link is (https://plyr.io/#video)
"Whenever I replace it with a video link of my own, The video player
just doesn't work, I have tried so many things..."
Keep your link as one line (eg: Don't break the file name with Enter to put some text on a new line. No new line after "Trailer-" text).
You cannot have empty spaces like (see grey area in below link's wording):
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4"
The correct link is:
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
So when you say (not working):
But when I actually try to replace:
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4
Correct way should be:
But IT WORKS when I actually try to replace:
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4
Related
Assumption.
I want to use AR.js technology to display an video when I hold the camera up to a marker.
No matter how many times I hold it up, the video does not appear.
What we want to achieve
We would like to play the video with sound when the camera is held over the marker. (I want to play the video with sound on iPhone as well.)
Problem/error message being encountered
No video is played back when the camera is held over the marker.
I have checked for file name or code errors or something like that, but it doesn't seem to be there.
I just tried accessing the actual site and the camera no longer shows up either. I've put the situation on video.
enter link description here
Source code in question
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
<!-- A-Frame Loading Libraries -->
<script src="aframe-master.min.js"></script>
<!-- AR.js Loading Libraries -->
<script src="aframe-ar.js"></script>
</head>
<body style='margin:0px; overflow:hidden;'>
<a-assets>
<video id="ar-video" poster="img.jpg" crossOrigin="anonymous" type="video/mp4" src="tanaka.mp4" muted="true" autoplay loop="true" playsinline webkit-playsinline controls />
</a-assets>
<!-- Hide screen display for debugging and buttons for VR, respectively. -->
<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
<!-- Load the ".patt" file created this time -->
<a-marker type='pattern' url='pattern-movie-tanaka.patt'>
<a-video src="#ar-video" width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<script>
window.addEventListener('click', function () {
var v = document.querySelector('#ar-video');
v.play();
});
</script>
<script>
// Added variable definitions for video storage
var video = null;
AFRAME.registerComponent('registerevents', {
init: function () {
var marker = this.el;
// Registration of events where markers are detected
marker.addEventListener('markerFound', function () {
// After marker recognition, video playback
if (video == null) {
video = document.querySelector('#ar-video');
}
video.play();
});
// Registration of events with missing markers
marker.addEventListener('markerLost', function () {
// If marker recognition fails, video stops
video.pause();
});
}
});
window.addEventListener('click', function () {
video = document.querySelector('#ar-video');
video.play();
});
</script>
</body>
</html>
I click "home" nav link, background video starts then stops after a few seconds.
i click "about" the video starts up again where it stopped last and plays for a few seconds.
and continue this through the nav bar clicks.
This is what i've come up with so far. I am ignoring the making it a background video right now and just trying to control the start and stop with a simple button. the video will not start on button click. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
clickme
<video width="800" height="600"
name="Video Name" src="2160p.mov"></video>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
function play1(){
document.getElementById("2160p.mov").currentTime=3;
document.getElementById("2160p.mov").play();
setTimeout(3000,"stopvideo()")
}
function stopvideo(){
document.getELementById("2160p.mov").stop();
}
</script>
</body>
</html>
Few issues here:
Your video tag has no id set but you are calling document.getElementById("2160p.mov") which obviously does not works. You can fix this by first adding any id to video.
setTimeout(3000,"stopvideo()") syntax is incorrect. Correct way is setTimeout(stopvideo, 3000). For more info: setTimeout()
Also, HTML Video element (<video>) does not have and stop() event. Instead you can use pause() to acheive desired behvaiour. There are many other events which you can check out which might help.
So, update your HTML like:
<video id="myVideo" width="800" height="600" name="Video Name" src="2160p.mov"></video>
and then update your js code like:
function play1() {
document.getElementById("myVideo").currentTime = 3;
document.getElementById("myVideo").play();
setTimeout(stopvideo, 3000);
}
function stopvideo() {
document.getElementById("myVideo").pause();
}
DEMO:
function play1() {
document.getElementById("myVideo").currentTime = 3;
document.getElementById("myVideo").play();
setTimeout(stopvideo, 3000);
}
function stopvideo() {
document.getElementById("myVideo").pause();
}
Play<br/>
<video id="myVideo" width="400" height="300" name="Video Name" src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
I made a website (not on air yet) and I tested it live with some free hosting.
The website contains a map tag and a big picture within it.
I made it so if someone clicks on a part of the picture a specific audio will be heard, according to where he clicked.
My problem is that there are a lot of audio tags (about 300) and because there are lots of bandwidth-hogging files, it takes about 10 minutes until the website is fully loaded which means most of the audios don't work for several minutes.
I want to know if there is a way, maybe a responsive way with javascript or PHP that will allow me to make those audio tags only if the user clicks on the map. That way it will not use that much bandwidth. Also if anyone can think of a better way it will greatly appreciated.
I'm adding the javascript for the click event so you can see what it is all about -
$('#Swensens_maze').click(function(){
$('audio').each(function(){
this.pause(); // Stop playing
// Reset time
});
$('#Swensens_maze_audio').get(0).play();
return false;
});
This is one example from many. The "#swensens_maze" is the area tag and the "#Swensens_maze_audio" is the audio tag for it.
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
EDIT The audio now automatically strats
EDIT 2 I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map {width:100%;height:75px;background:#bbb}
.c1 {background:#f2f2f2}
.c2 {background:#000}
.c3 {background:#cc4444}
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
});
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.get(0).play();
return false;
});
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map {
width:100%;
height:75px;
background:#bbb
}
.c1 {
background:#f2f2f2
}
.c2 {
background:#000
}
.c3 {
background:#cc4444
}
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.play();
return false;
});
</script>
</body>
</html>
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
Your browser tries to preload the audio for each audio tag. So the answer is to set the attribute preload in the audio tag to value none
use can use: <audio controls preload="none">
I am working on this site the home page slider has an option with label Watch the video I have added the below codes to my templates for the video to work.
<script>
function videoshow()
{
document.getElementById("sliders-container").style.display="none";
document.getElementById("show-video").style.display="block";
document.getElementById("show-video").innerHTML="<span id='close-button' onclick='closevideo()'>close</span><video id='example_video_1' class='video-js vjs-default-skin' controls width='100%' data-setup='{}' autoplay><source src='http://constantin-entertainment.info/king/wp-content/themes/Avada/video/sample11.mp4' type='video/mp4' /><source src='http://video-js.zencoder.com/oceans-clip.webm' type='video/webm' /><source src='http://video-js.zencoder.com/oceans-clip.ogv' type='video/ogg' /><track kind='captions' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 --><track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 --><p class='vjs-no-js'>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href='http://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a></p> </video>";
}
function closevideo()
{
document.getElementById("show-video").style.display="none";
document.getElementById("show-video").innerHTML="";
document.getElementById("sliders-container").style.display="block";
}
</script>
and the below div for the video to show
<div id="show-video">
</div>
and called the below files also
<link href="<?php bloginfo('template_directory'); ?>/css/video-js.css" rel="stylesheet" type="text/css">
<script src="<?php bloginfo('template_directory'); ?>/js/video.js"></script>
the videos are playing firn in all browsers.Now I would like a box to hover out like "Contact Me" with a link to my contact form.so I searched over net and applied the following code
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
Conatct Me
};
</script>
but didnt help. Not sure where I have gone wrong.
i think your are writing wrong syntax.
code should be like that
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function () {
$('Conatct Me').appendTo('#example_video_1');
};
</script>
I would user JQuery for that, just download the js files and then include them in ur file with:
<script src="[path]"></script>
now you can do this:
<script>
window.onload = function(){
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
$('#contact').html('Conatct Me');
}
}
</script>
if this dont works pleas write the JS error as comment.
EDIT:
Totaly forgot about that you can also change the text in the DIV without any JQuery:
<script>
document.getElementById('contact').innerHTML = 'Conatct Me';
</script>
I need to set tap trigger on some selectors. I'm using jQuery Mobile and this function, so what is not right?
window.onload = load;
function load() {
$('.togglePlay').trigger('tap');
}
Look into tap and taphold touch event.
// The tap event won't be emitted along with the taphold event
$.event.special.tap.emitTapOnTaphold = false;
$("#fire").on("taphold", function() {
$(this).addClass("colorize");
});
$("#banana").on("tap", function() {
$(this).hide();
});
body {
text-align: center;
}
span {
font-size: 3rem;
}
span:hover {
cursor: pointer;
}
.colorize {
color: transparent;
text-shadow: 0 0 0 red;
}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<h3>If you tap and hold me for 750 milliseconds, I will fill up with color.</h3>
<span id="fire">🔥🔥🔥</span>
<hr />
<h3>If you tap me quick, I will dispear.</h3>
<span id="banana">🍌🍌🍌</span>
try:
$(document).ready(function(){
$('.togglePlay').trigger('click');
});
Assuming the loading page has a div containing data-role=page and its id is mypage, you could use the pageinit event to fire up the click on '.togglePlay' like this :
$(document).on("pageinit", "#mypage", function () {
$('.togglePlay').trigger('click');
});
References
For reasons why you mustn't use ready event with jQM, see jQuery Mobile: document ready vs page events
Link for page events from jQM API : Events
I use jQuery tap() method.
$('.togglePlay').tap();
http://api.jquerymobile.com/tap/
This works for me :)
you should be able to set autoplay=true or some other setting with...
<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
example from: http://www.w3schools.com/tags/att_video_autoplay.asp
without the use of js