autoplay not working on mobile devices YouTube video - html

The video is not working in autoplay on mobile, I know that the question has already been asked several times but the code was developed specifically for my site (by a developer who answers me more).
So I can't change it entirely, could I tell me what to add to make it work?
<script>
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide': 1,
'wmode': 'opaque',
'showinfo': 0,
'loop': 1,
'mute': 1,
//'start': 15,
//'end': 110,
'playlist': '{{ product.metafields.left_image.left_image[forloop.index0] }}'
},
videoId: '{{ product.metafields.left_image.left_image[forloop.index0] }}',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.mute();
$('#text').fadeIn(400);
//why this? Well, if you want to overlay text on top of your video, you
//will have to fade it in once your video has loaded in order for this
//to work in Safari, or your will get an origin error.
}
//this pauses the video when it's out of view, just wrap your video in .m-//video
$(window).scroll(function() {
var hT = $('.m-video').height(),
wS = $(this).scrollTop();
if (wS > hT) {
player.pauseVideo();
}
else {
player.playVideo();
}
});
</script>

you can add the following code in the end of the onPlayerReady function:
if(window.innerWidth < 768) {
player.playVideo();
}
This code will start playing the video on mobile devices by checking the screen size.

Related

Opentok on streamCreated subscribe makes mobile chrome freeze

I am developing webRTC chat on opentok platform and vue.js. While everything is fine on desctop and mobile firefox browser, mobile chrome gets hung up when trying to subscribe to the event.stream. The weird thing is that if I activate developer tools then it will work on mobile chrome as expected so I can not debug error log on this one. I have been racking my brain on this for three days now. If anyone can help me I would appreciate it! Here is the relevant part of my code:
//start the live vicdeo sessiion
startLivevideoSession: function(session){
this.call = true; //set call to true
//initiate opentok session
this.LiveVideo_session = OT.initSession(session.apiKey, session.session)
//define on streamcreated method
this.LiveVideo_session.on('streamCreated', function(event) {
//this is the problem:
this.LiveVideo_session.subscribe(event.stream, 'stream_video1', {
height: '100%',
width: '100%',
showControls: true,
style: {
audioLevelDisplayMode: 'auto',
buttonDisplayMode: 'off',
nameDisplayMode: 'off',
videoDisabledDisplayMode: 'auto',
showArchiveStatus: false
}
}, this.handleError)
//problem ends
}.bind(this))
//define on sessionDisconnected method
this.LiveVideo_session.on("sessionDisconnected", function (event) {
if(this.call){
this.stopVideoButtonPress() //stop on going chat session if any
bus.$emit('showModal', "stopLivevideoSessionLeft"); //notify user that other user left the page
}
}.bind(this))
//define connect method
this.LiveVideo_session.connect(session.token, function(error) {
if(error){
this.handleError(error)
}else{
//if call mode is chat, do not publish chat at all
if(this.call_mode != 'chat'){
this.LiveVideo_session.publish(this.my_video); //publish my video to chatroom
}
//if testsession, publish stream also to stream_video1
if(this.testSession){
this.LiveVideo_session.publish(this.test_publisher)
}
}
}.bind(this));
//store session.premium_session to premium_session
this.premium_session = session.premium_session
//wait for UI elements to be created on page before OT.initPublisher
setTimeout(() => {
//setup my_video
if(this.call_mode == "audio") //if only audio is selected
var publisherOptions = {
videoSource: null,
name: this.connection_setup.stream_video_description+" (vain ääni)",
width: '100%',
height: '100%',
opaque: '1',
style: {
nameDisplayMode: "on",
audioLevelDisplayMode: "on",
}
}
else
//setup my_video for videochat
var publisherOptions = {
name: this.connection_setup.stream_video_description,
width: '100%',
height: '100%',
opaque: '1',
style: {
nameDisplayMode: "on",
audioLevelDisplayMode: "on",
}
}
//if call mode is chat, do not publish chat at all
if(this.call_mode != 'chat'){
console.log("call mode"+this.call_mode)
this.my_video = OT.initPublisher('my_video', publisherOptions, this.handleError)
}
//if testsession, publish stream also to stream_video1
if(this.testSession){
console.log("call testSession "+this.testSession)
publisherOptions.name = 'Sinun kuvasi keskustelukumppanin näkemänä';
this.test_publisher = OT.initPublisher('stream_video1', publisherOptions, this.handleError)
}
}, 600);
},
It might be Chrome that freezes, not opentok. See this chrome 61/android bug which includes a workaround of adding a border-radius

Open a HTML5 video in fullscreen by default?

I wish to host some HTML5 videos in a HTML app. On opening the video they currently just open up within a page and play by default with the controls available with the option to open fullscreen, is there any way to get playing full screen as soon as you open the page?
<div class="video-container" data-tap-disable="true">
<div class="videotitle">{{product.title}}</div>
<div class="videoduration">Duration: {{product.duration}}</div>
<video id="myVideo" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="{{product.video}}" type="video/mp4"/></video>
Here is my Angular controller, I assume the JS code will fit in here somewhere as opposed to my product.html
.controller('ProductCtrl', function (Products, $rootScope, $scope, $stateParams, $state, $timeout) {
$scope.product = Products[$stateParams.productId];
var video = document.getElementById("myVideo");
// Stop video playing when we go to another page
$rootScope.$on('$stateChangeStart', function () {
stopVideo();
});
// Go to list of other videos when individual HTML5 video has finished playing
angular.element(video).bind('ended', function () {
$state.go('app.products');
});
function stopVideo() {
video.pause();
video.currentTime = 0;
}
});
const elem = document.getElementById("myVideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
var video = $("#myVideo");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});

Turn webcam off after "Taking Picture"

I am having an issue with turning the webcam off once I have taken a snapshot. The code below works well - but I just cant figure out how to turn off the webcam once I have everything in the canvas.
I have tried a few methods that I have found by some some research, however none seem to help.
I have tried to add video.stop(); in the "snap" eventListener, and it says "undefined is not a function", however most things I have read says it should work?
Error screenshot: https://www.dropbox.com/s/h7g4cidqhimc5ij/Screenshot%202014-08-04%2013.08.04.png
To sum it all up, when someone clicks "Take Picture", I want the picture to be taken and the camera hardware turned off. The eventlister in later half of the code below is for the "Take Picture" button.
function startCam() {
$('#can').hide();
$('#video').show();
$('#tab1-retry').hide();
$('#save-tab1').hide();
var video = document.getElementById("video"),
mask = document.getElementById("mask"),
videoObj = {
"video": true
},
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("snap").addEventListener("click", function() {
window.canvas1 = new fabric.Canvas('canvas');
video.pause();
$('#video').hide();
$('#snap').hide();
$('#can').show();
$('#save-tab1').show();
$('#tab1-retry').show();
// VIDEO CAPTURE
var imgInstance = new fabric.Image(video, {
left: 0,
top: 0,
});
imgInstance.set('selectable', false);
canvas1.add(imgInstance);
// FIRST LAYER
mask = document.getElementById("mask");
var imgInstance1 = new fabric.Image(mask, {
left: 100,
top: 100,
cornerSize: 20
});
imgInstance1.set('selectable', true);
canvas1.add(imgInstance1);
// CANVAS LAYER
canvas1.setActiveObject(canvas1.item(1));
canvas1.item(1)['evented'] = true;
canvas1.calcOffset();
canvas1.renderAll();
});
}
inside your success callback function you could initialize the stream to a variable say:
var cameraStream = stream;
video.src = window.URL.createObjectURL(stream);
then in your 'snap' eventListener you could just pause() the video stream after taking the screenshot and close/stop the cameraStream:
video.pause();
cameraStream.stop();
.stop() closes the webcam input.

Why is HTML5 support for capturing camera in mobile browsers only?

The question is not why is mobile important, I get that.
The question is how can it be the case that there is not a single HTML5 browser for the desktop that has these same get user media extensions in place yet??
Basing this on this post.
HTML
<video id="video" width="300" height="220" autoplay></video>
<button id="snap">Take Photo</button>
<canvas id="canvas" width="300" height="220"></canvas>
JS:
<Script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = {
"video": true
},
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 300, 220);
});
}, false);
</Script>
that works on both chrome and firefox :)
Look at this link. This document is not complete. It is subject to major changes and, while early experimentations are encouraged, it is therefore not intended for implementation.
That's why it's not fully supported across browsers.

Using Buzz.js audio starts from last where i stopped instead of start from beginning. (ipad1)

I am using buzz.js library for html. I have a HTML list element where every list element has a specific audio. i want to play audio on click event of list and also on next and previous buttons. so i wrote below code for that, it's working on desktop browsers. when i am testing it on mobile safari (ipad1). when i am playing audio second time it is started from where it is stopped on last time. i want to start audio from beginning.
$(document).ready(function(){
var mainIntro = new buzz.sound( "audio/intro", {formats: [ "ogg", "mp3", "aac" ], preload: true, autoplay: true, loop: false});
var slide1 = new buzz.sound( "audio/slide1", {formats: [ "ogg", "mp3", "aac" ], preload: true, autoplay: true, loop: false});
function introAudio() {
buzz.all().stop();
mainIntro.play().bind('ended', function(e){
document.getElementById("blinkRed").style.visibility="visible";
});
}
function slide1Audio() {
buzz.all().stop();
slide1.play().bind('ended', function(e){
document.getElementById("blinkRed").style.visibility="visible";
});
}
$('#navHolder ul li a').click(function() {
if (myIndex == -1){
$('#slideHolder').attr('src',"introMain.html");
myIndex = -1;
introAudio();
}
else if (myIndex == 0){
$('#slideHolder').attr('src',"intro.html");
myIndex = 0;
slide1Audio();
}
else if (myIndex == 1){
}
});
I know this is old, but it comes up on Google searches so I thought I would answer.
I had a similar problem like this before and to fix it you have to add a line of code. It only seems to happen in WebKit based browsers.
Add:
mySound.load();
This reloads the audio file and it starts from the beginning.