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?
I am trying to embed this code on my blogspot, after I publish I get this error -
"Embedding video on this site is forbidden. Watch on Odnoklassniki"
The code snippet -
<iframe width="560" height="315" src="//ok.ru/videoembed/916692339423" frameborder="0" allow="autoplay" allowfullscreen></iframe>
After adding the full url of the video it works
<iframe width="560" height="315" src="https://ok.ru/videoembed/916692339423" frameborder="0" allow="autoplay" allowfullscreen></iframe>
ok.ru has an embed widget that works for this. Just substitute your video URL as shown below (this should work with or without the protocol defined at the start of the URL)
<script>
!function (d, id, did, st) {
var js = d.createElement("script");
js.src = "https://connect.ok.ru/connect.js";
js.onload = js.onreadystatechange = function () {
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
if (!this.executed) {
this.executed = true;
setTimeout(function () {
OK.CONNECT.insertContentWidget(id,did,st);
}, 0);
}
}};
d.documentElement.appendChild(js);
}(document,"ok_content_widget","https://ok.ru/videoembed/916692339423",'{"topicTextIsFull":1}');
</script>
I'm trying to embed a video with the sound muted but I can not figure out how it make it work.
Currently I'm using this but doesn't work:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Any of you knows how can I make this work ?
Updated
Add &mute=1 to the end of your url.
Your new code would be:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&autoplay=1&mute=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
For me works using &autoplay=1&mute=1
The accepted answer was not working for me, I followed this tutorial instead with success.
Basically:
<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'YOUR_VIDEO_ID', // YouTube Video ID
width: 560, // Player width (in px)
height: 316, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0 // Hide video controls when playing
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
// Written by #labnol
</script>
This is easy. Just add mute=1 to the src parameter of iframe.
Example:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?controls=0&mute=1&showinfo=0&rel=0&autoplay=1&loop=1&playlist=uNRGWVJ10gQ" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/7cjVj1ZyzyE?autoplay=1&loop=1&playlist=7cjVj1ZyzyE&mute=1" frameborder="0" allowfullscreen></iframe>
mute=1
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ObHKvS2qSp8?list=PLF8tTShmRC6uppiZ_v-Xj-E1EtR3QCTox&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ObHKvS2qSp8?list=PLF8tTShmRC6uppiZ_v-Xj-E1EtR3QCTox&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
I would like to thank the friend who posted the codes below in this area. I finally solved a problem that I had to deal with all day long.
<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'xCIBR8kpM6Q', // YouTube Video ID
width: 1350, // Player width (in px)
height: 500, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 0, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 0, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0, // Hide video controls when playing
rel: 0
},
events: {
onReady: function(e) {
e.target.setVolume(5);
}
}
});
}
// Written by #labnol
</script>
Source: https://developers.google.com/youtube/iframe_api_reference
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '720',
width: '1280',
videoId: 'M7lc1UVf-VE',
playerVars :{'autoplay':1,'loop':1,'playlist':'M7lc1UVf-VE','vq':'hd720'},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
done = true;
}
event.target.setVolume(0);
}
</script>
Just pass mute=1.
For example:
<iframe id="myVideo" src="https://www.youtube.com/embed/k0DN-BZrM4o?rel=0&autoplay=1;mute=1" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
was also looking for a solution to this but I wasn't including via iframe, mine was linked to images/video.mp4 - found this https://www.w3schools.com/tags/att_video_muted.asp - and I simply added < video controls muted > (CSS/HTML 5 solution), but no JS required for me...
<iframe width="560" height="315" src="https://www.youtube.com/embed/ULzr7JsFp0k?list=PLF8tTShmRC6vp9YTjkVdm1qKuTimC6K3e&rel=0&autoplay=1&controls=1&loop=1" rel=0& frameborder="0" allowfullscreen></iframe>
Try this
<iframe width="420" height="315" src="http://www.youtube.com/embed/
HeQ39bLsoTI?autoplay=1&cc_load_policy=1" volume="0" frameborder="0"
allowfullscreen></iframe>
don't forget to write volume="0"
I am trying this code for video streaming ...when i send the data through ajax and receive that data on same page video play properly..but when i try to play on other page or server side it gives error...
<!--This is my client side code-->
<html>
<body>
<div id="mine">
<video id="video" width="500" height="500" autoplay="true"></video>
<video id="video1" width="500" height="500" autoplay="true"> </video>
</div>
<script type="text/javascript">
var str;
(function(){
var video=document.getElementById('video'),
vendorUrl =window.URL || window.webkitURL;
navigator.getMedia=navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.nsGetUserMedia;
navigator.getMedia({
video:true,
audio:true
},function(stream){
video.src=vendorUrl.createObjectURL(stream);
str=vendorUrl.createObjectURL(stream);
video.play();
},function(error){
alert("error")
});
})();
var ajax=new XMLHttpRequest();
function processresponse(){
if(ajax.readyState===4){
var rse=ajax.responseText;
var vid=document.getElementById("video1");
vid.src=rse;
vid.play();
}
}
function show(){
ajax.onreadystatechange=processresponse;
ajax.open("Post","server.jsp",true);
ajax.send(str);
}
timer = setInterval(show,10000 );
</script>
</body>
</html>
server.jsp....
<%
InputStream is=request.getInputStream();
byte[] bt=new byte[1000];
is.read(bt);
String req=new String(bt);
out.println(req );
%>
<!--This is the code which is giving error......-->
<%#page import="java.io.File"%>
<%#page import="java.io.FileInputStream"%>
<%#page import="java.io.BufferedOutputStream"%>
<%#page import="java.io.FileOutputStream"%>
<%#page import="java.io.InputStream"%>
<html>
<body>
<video id='video1' width='500' height='500' autoplay='true'>
</video>
<%
InputStream is=request.getInputStream();
byte[] bt=new byte[1000];
is.read(bt);
String req=new String(bt);
%>
<script type="text/javascript">
var vid=document.getElementById("video1");
alert('<%=req%>');
vid.src='<%=req%>';
vid.play();
</script>
</body>
I'm trying to embed a video from YouTube. When I preview the page, I will get a black screen with the words "This video contains content from UMG. Playback restricted on certain sites. Watch on YouTube(link)." The video did have copy written material, but has been removed and the video was uploaded again to YouTube. I still get the same error. Someone else has been able to upload the video on a live site. I'm not running a testing server-not sure if this is part of the problem?
<'iframe width="640" height="360" src="http://www.youtube.com/embed/3uIkI49uk8I?rel=0"
frameborder="0" allowfullscreen></iframe>
The example code below has a video that explains how to remove the copyright restriction
when I put in your youtube it came up with the UMG so try the steps in the video and the code snippet should work too.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>play youtube</title>
</head>
<'iframe width="640" height="360" src="http://www.youtube.com/embed/lUq0lYmJ89c?rel=0" frameborder="0" allowfullscreen>
<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.`enter code here`
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'lUq0lYmJ89c',
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>