I am trying to play a video with a bookmark created but the bookmark is not detected, therefore it does not play the video on the screen, it is only heard in the background but it does not show the video.
my code of arjs & aFrame
<html>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden">
<a-assets>
<video
id="ar-video"
crossorigin="anonymous"
type="video/mp4"
src="https://cdn.glitch.me/3f355bb5-4189-4fe3-9d54-d98ba87183f1/VID_20220621_143037.mp4"
autoplay
loop="true"
playsinline webkit-playsinline controls
></video>
</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="https://raw.githubusercontent.com/Raikishadows17/carsmarket/main/assets/marcadores/gatomarker/gato.patt">
<a-video
src="#ar-video"
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>
At the time of testing the page, the marker does not show me the video, but in the background, the sound of the video can be heard. Could you help me?
Related
I have used Owl Carousel which have 3 HTML-5 Video & auto-play mode.
First Item is Video and 4th and 7th are videos.
When i run in IE-11 every third image item comes video which not hide.
Basically, my requirements is when video item comes video should autoplay and not run any next item until video end. if video end then next slide come.
this all working good chrome & Mozilla but IE-11 have video item not proper hide.
var owl = window.jQuery('.slider_owl');
window.jQuery('.slider_owl').owlCarousel({
items: 1,
loop: true,
dots: false,
video: true,
autoplay:true,
autoplayHoverPause:false,
autoplayTimeout:5000,
responsive : {
768 : {
onInitialized: function () {
if ($(".owl-item.active video", this.$element).length) {
$(".owl-item.active video", this.$element)[0].play();
owl.trigger('stop.owl.autoplay');
$(".owl-item.active video", this.$element).on('ended', function () {
owl.trigger('play.owl.autoplay')
});
}
},
onTranslated: function () {
if ($(".owl-item.active video", this.$element).length) {
$(".owl-item.active video", this.$element)[0].play();
owl.trigger('stop.owl.autoplay');
$(".owl-item.active video", this.$element).on('ended', function () {
owl.trigger('play.owl.autoplay')
});
}
}
}
}
});
From your description, since you are using HTML 5 video element, I suggest you could try to add an event listener to detect whether the video is displaying or ended, then stop/start the owlCarousel.
Please refer to this sample to add an event listener to the video element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls autoplay>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
media.addEventListener("playing", function() {
$("#output").html("Playing event triggered");
});
// Pause event
media.addEventListener("pause", function() {
$("#output").html("Pause event triggered");
});
//End event
media.addEventListener("ended", function () {
$("#output").html("Ended event triggered");
});
</script>
Then, in the playing and ended function, you could start/stop the owlCarousel using the following command:
owl.trigger('play.owl.autoplay')
or
owl.trigger('stop.owl.autoplay')
More detail information about OwlCarousel Autoplay, you could check this article.
I want to autoplay an HTML5 video after opening it on fancybox3.
here's my codepen:
https://codepen.io/ableslayer/pen/aygGQX
and my code:
$(document).ready(function() {
$("[data-fancybox]").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
this.content.find('video').trigger('play')
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
Give your video a id (myVideo) and add this line in afterShow function
var vid = document.getElementById("myVideo");
vid.play();
Javascript
$(document).ready(function() {
$("[data-fancybox]").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
var vid = document.getElementById("myVideo");
vid.play();
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
HTML
<a data-fancybox data-src="#one" class="fancybox">link</a>
<div id="one" style="display:none">
<video id='myVideo' width="400" controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
I want to display youtube videos in iphone cordova app,
I tried iframe but it is not displaying some times.
So trying object tag
my code is
<div style="width: 100%; padding: 0" id="getWidth">
<object width="100%" height="auto">
<param name="movie" value="http://www.youtube.com/v/{{youtubeId}}">
<embed src="http://www.youtube.com/v/{{youtubeId}}" type="application/x-shockwave-flash" width="100%;" height="auto">
</object>
</div>
here getWidth is taking full screen but video is not showing in full width as shown in the following image
Note: left side safari inspector and right side iphone simulator
Image is taken while trying to set width dynamically but in both cases result is same
Refer to the Youtube Player API for how to embed it in your application. Iframe is by far the best way to go.
Here is a sample html from the API
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
I tried to use the YouTube player demo to generate the code necessary for my video to autoplay and loop itself.
But only the autoplay works, it doesn't loop, and the demo-video doesn't work either. Here is the code I've used.
<iframe class="embed-responsive-item" id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3" frameborder="0" allowfullscreen>
</iframe>
Try adding the playlist parameter along with the loop. For playlist, set it's value as the current video id.
<iframe class="embed-responsive-item"id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3&playlist=M7lc1UVf-VE"
frameborder="0" allowfullscreen></iframe>
Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:
http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
Reference:https://developers.google.com/youtube/player_parameters#loop
I just figured out you need to have playlist="" to use loop.
<iframe src="https://www.youtube.com/embed/peSfCy7HFrM?playlist=peSfCy7HFrM&loop=1;rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen>
Using in react native like this, make sure to use same video ID value for playlist as well.
for e.g if video id is SpongeBOB
then url will be like this :
https://www.youtube.com/embed/SpongeBOB?playlist=SpongeBOB&loop=1
below is implementation in react native webview
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
mediaPlaybackRequiresUserAction={true}
style={{ height:180, width:300,alignSelf:"center",alignContent:"center"}}
source={{uri: 'https://www.youtube.com/embed/qD101Xlc5uw?playlist=qD101Xlc5uw&loop=1' }}
/>
'playlist': '<?php echo $youtube_video ?>'
inside playerVars.
For example a full code:
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height:'100%',
width: '100%',
fitToBackground: true,
videoId: '<?php echo $youtube_video ?>',
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide':1,
'enablejsapi':1,
'loop':1,
'disablekb':1,
'fs': 0,
'modestbranding': 0,
'showinfo': 0,
'color': 'white',
'theme': 'light',
'rel':0 ,
'playlist': '<?php echo $youtube_video ?>'
},
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute();
player.setVolume(0);
//player.setSize(1920, 1080);
player.setLoop(true);
player.setPlaybackQuality('hd1080');
}
Your Html code:
<div id="player"></div>
If you want to keep video in a variable use this:
<?php $youtube_video='C0DPdy98e4c';?>
Accepted answer didn't work for me either. Working workaround for September 2018 (bonus: set width and height by CSS for #yt-wrap instead of hard-coding it in JS):
<div id="yt-wrap">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="ytplayer"></div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
width: '100%',
height: '100%',
videoId: 'VIDEO_ID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute(); // comment out if you don't want the auto played video muted
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(0);
player.playVideo();
}
}
function stopVideo() {
player.stopVideo();
}
</script>
You need to add
https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1
note the playlist = VIDEO_ID is mandatory and is set to the video id for a single video
so in my case the url was
https://www.youtube.com/embed/C5tG7pztlb0?playlist=C5tG7pztlb0&loop=1&autoplay=1&controls=1&showinfo=0&mute=1
mute is on
show info is off
show controls is off
autoplay is on
loop is on
Here's another working example of an embedded and looping playlist:
<iframe width="1019" height="573" src="https://www.youtube.com/embed/videoseries?list=PLDz-3V1_TIyhVYiJeGdqc9bjpAf9L9Zfq&loop=1" frameborder="0" allow="accelerometer; autoplay " ;"="" =""="" encrypted-media;="" gyroscope;="" picture-in-picture"="" allowfullscreen=""></iframe>
To my problem, I have one link . I want to play the video by clicking the link in a fancybox overlay window. This is not a problem. The problem is the parameters, for example "autoplay" or "autohide".
The following link doesn't work:
The Overlay-Window opened, but the video is not playing automatically.
EDIT: I want to use the HTML5 Player on mobile devices. On a desktop-browser it works with the parameters, but not on mobile devices.
As it turns out, autoplay cannot be done on iOS devices (iPhone, iPad, iPod touch) and Android.
See https://stackoverflow.com/a/8142187/2054512 and https://stackoverflow.com/a/3056220/2054512
Have a look on code below.
Tested and found working on Mobile and Tablet devices.
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
The code below was tested on iPhone, iPad (iOS13), Safari (Catalina). It was able to autoplay the YouTube video on all devices. Make sure the video is muted and the playsinline parameter is on. Those are the magic parameters that make it work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">
</head>
<body>
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '100%',
videoId: 'osz5tVY97dQ',
playerVars: { 'autoplay': 1, 'playsinline': 1 },
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
</body>
</html>
The official statement "Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.
Reference: https://developers.google.com/youtube/iframe_api_reference
There is a way to make youtube autoplay, and complete playlists play through. Get Adblock browser for Android, and then go to the youtube website, and and configure it for the desktop version of the page, close Adblock browser out, and then reopen, and you will have the desktop version, where autoplay will work.
Using the desktop version will also mean that AdBlock will work. The mobile version invokes the standalone YouTube player, which is why you want the desktop version of the page, so that autoplay will work, and so ad blocking will work.
How to use a Youtube channel live url to embed and autoplay. Instead of Video ID that has to be constantly updated for live stream changes.
I mixed two sets of code and came up with a working auto play Youtube video embed from a channel live stream.
My thanks to both of the other contributors for their help. Hopefully this helps someone else some time.
Example stream
https://www.youtube.com/embed/live_stream?channel=UCwobzUc3z-0PrFpoRxNszXQ
The code below by Zubi answered Nov 25 '16 at 7:20 works with Youtube videos.
With code by Darien Chaffart found at
https://stackoverflow.com/a/61126012/1804252
Example
<html>
<head>
</head>
<body>
<center>
<script src="https://www.youtube.com/iframe_api"></script>
<!-- Insert Livestream Video -->
<iframe id="live-video" src="https://www.youtube.com/embed/live_stream?channel=UCwobzUc3z-0PrFpoRxNszXQ&enablejsapi=1" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen enablejsapi="1"></iframe>
<!-- Basic API code for Youtube videos -->
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('live-video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
var url = player.getVideoUrl(); /*Use Youtube API to pull Video URL*/
var match = url.match(/[?&]v=([^&]+)/);
var videoId = match[1]; /*Use regex to determine exact Video URL*/
// Insert a new iFrame for the livestream chat after a specific div named chatframe*/
var livevid = document.createElement("iframe");
livevid.src = 'https://www.youtube.com/live_chat?v=' + videoId + ''
livevid.width = '100%';
livevid.height= '100%';
document.getElementById("chatframe").appendChild(livevid);
}
function onPlayerStateChange() {
}
function onPlayerReady(event) {
event.target.playVideo();
}
// The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 90000000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</center>
</body>
</html>