aframe Handle video / audio auto play

trafficstars

Brainstorming. Dealing with browser autoplay policies is one of the most confusing things for beginners.

Why my audio / video is not playing? Probably one of the top 5 most asked questions ever.

Thinking if there's something that A-Frame can do to handle user gesture gracefully. For instance, detect if there is any a-video, a-audio tags in a-assets with autoplay then present a modal prompting the user to start audio / video playback. This would be enabled by default but can be disabled.

Concern is that is that it might be too prescriptive, making things even more confusing. I see new devs asking Why there's a prompt asking the user to play / video? How can I remove it?. Maybe just expanding the FAQ or docs would be the better way.

Jan 12 '23 23:01 dmarcos

my example, works fine (video autoplay with sound) and ios support

<html>
<head>
	<title>AR Demo</title>
	<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
	<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<style>
		video{
			object-fit: cover;
		}
		.center-v button{
			font-size: 3em;
		}
		.center-v {
			height: 500px;
			display: flex;
			align-items: center;
		}
		.arjs-loader {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 9999;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	</style>
	<script>

		var vid;

		$(function() {

			vid  = $('#waterVideo').get(0);

			$( "#start" ).click(function(){

				$('#pre_start').hide();

				vid.play();
				vid.pause();
				vid.currentTime = 0;

			});

		});

		AFRAME.registerComponent('registerevents', {
			init: function() {

				var marker = this.el;

				marker.addEventListener('markerLost', function() {
					vid.pause();
					vid.currentTime = 0;
				});

				marker.addEventListener('markerFound', function() {
					vid.currentTime = 0;
					vid.play();
				});
			}
		});
	</script>
</head>
<body style="margin:0; overflow:hidden;">

<div class="arjs-loader" id="pre_start">
	<div class="center-v">
		<button id="start">Start</button>
	</div>
</div>
<a-scene embedded artoolkit=""  arjs='debugUIEnabled: false;'>
	<a-assets >
		<video id="waterVideo" crossorigin="anonymous" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
	</a-assets>
	<a-marker preset="hiro" registerevents>
		<a-video id="water" src="#waterVideo" position="0 0 0" rotation="270 0 0" play="true" ></a-video>
		<a-text value="Test" color="red" position="-0.5 0 0.8" rotation="270 0 0"  side="double"></a-text>

	</a-marker>
	<a-entity camera></a-entity>
</a-scene>

</body>
</html>

Feb 17 '23 18:02 gradus0

Developers need to be aware that autoplay is disabled on most websites by default these days and need to handle it manually.

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

// Example of video playback
window.addEventListener('click', function () { 
     document.querySelector('#video').play();
});

You can't just slap an autoplay attribute on a video tag and expect things to work auto-magically.

Aug 28 '23 01:08 lewweiming

aframe aframe copied to clipboard

Handle video / audio auto play

aframe
aframe copied to clipboard