How to use iOS playsinline with Javascript - javascript

I am trying to figure out how to make a video play inside the webpage and not open the iOS native player. I am creating the page in Adobe Animate HTML5 canvas. I understand that I want to use playsinline but I know very little about code and am having trouble implementing it. My understanding that this is possible is based on this website:
https://webkit.org/blog/6784/new-video-policies-for-ios/
I have been working on this for days and Adobe's forums haven't been able to help. I even tried publishing the .html/.js files and then opening them in dreamweaver and looking for places to add the playsinline code manually but nothing seems to work.
I've also read through these forum posts but I don't really understand them:
use webkit-playsinline in javascript
HTML5 inline video on iPhone vs iPad/Browser
Webkit-playsinline on iphone
"webkit-playsinline" video tag attribute
Here is the relevant code from Frame 1 of my Adobe Animate file. I am just wondering where to paste the playsinline code, or if I have to do it another way:
this.stop();
var nextBtnVAR = this.nextBtn;
var timelineVAR = this;
this.playBtn.addEventListener("click", playVideoFUNC.bind(this));
function playVideoFUNC()
{
$("#video1")[0].src = "videos/2.mp4";
$("#video1")[0].play();
this.pauseBtn.visible = true;
}
this.pauseBtn.addEventListener("click", pauseVideoFUNC.bind(this));
function pauseVideoFUNC()
{
$("#video1")[0].pause();
this.pauseBtn.visible = false;
}
this.nextBtn.addEventListener("click", nextFrameFUNC.bind(this));
function nextFrameFUNC()
{
this.gotoAndStop(2);
}
this.video1.on("added", function()
{
$("#video1")[0].addEventListener('ended', timelineVAR.endedHandler);
}
);
this.endedHandler = function(e)
{
timelineVAR.gotoAndStop(1);
};

i have found an example for donwload here: https://dizply.com/responsive-in-banner-video-ad-with-adobe-animate-cc/
they did it like this:
var video = document.createElement('video');
video.setAttribute('playsinline', 'playsinline');

Related

Youtube video autoplay with jquery

I wanted to make a website with Youtube video iframes, which starts to play on hover.
I've found this post Play youtube video on hover
This code works(video start to play on hover) but not all videos work (links seem to be broken).
The same thing happens when I use other videos so that's not broken links. I've found a post suggesting changing 'iframe' into 'embed' and this fixed broken links but then script stops working.
My script looks like below:
https://codepen.io/EwelinaWoloszyn/pen/dybQGWe
<script>$(document).ready(function(){
var nowPlaying = "none";
$('div').hover(function(){
nowPlaying = $(this).find('embed').attr('src');
$(this).find('embed').attr('src',nowPlaying+'&autoplay=1');
}, function(){
$(this).find('embed').attr('src',nowPlaying);
});
});
What should I change to make it work?
Many thanks in advance,
Neko
God forbid me for using W3Schools, but video elements in HTML5 have play() function in JavaScript
Documentation: https://www.w3schools.com/tags/av_met_play.asp
Your code:
$('div').hover(() => {
$(this).find('embed').play();
});

How to dynamically change html5 video source?

I'm using flowplayer to render live videos. On button click, I want to dynamically change the src (video url) to a different url. This needs to work well on most of the mobile devices (ios and Android). I have tried almost all the answers in this thread but nothing seems to work well on all devices - changing source on html5 video tag.
An answer by antonioj1015 works except that I don't see the default Play/Pause buttons on the player.
Here is my flowplayer container div looks like -
<div id="player" class="flowplayer">
<video id="video"><source id="video_src" src="//mydomain.com/video.mp4" type="video/mp4">
</video>
</div>
Javascript code looks like this -
document.getElementById('player').innerHTML = '<video id="video"><source src="'+newurl+'" type="video/mp4"></video>';
document.getElementById('video').load();
document.getElementById('video').play();
I have tried to replace the entire video tag. Also, tried to dynamically change the src but nothing seems to work. Any push in the right direction will be greatly appreciated. Thanks.
You can set flowplayer api to a global variable at the beginning
var myApi;
flowplayer(function (api, root) { myApi = api; });
Then on your button click, do:
$("#yourbutton").on("click", function () {
myApi.load({
sources: [{ type: "video/mp4",
src: newurl }]
});
});
You can use src property.
document.getElementById('video').src = 'https://example.com/othervideo.mp4';
document.getElementById('video').load();
document.getElementById('video').play();
Read more on https://www.w3schools.com/tags/av_prop_src.asp
let source = document.querySelector('video > source')
source.src = '[the-new-url]'
source.parentNode.load()

How can I desaturate a video file in HTML

I have a function that can desaturate an image successfully, but now I want to desaturate an ogg video file. Here is my function:
function desaturate(img) {
var img2 = Pixastic.process(img, "desaturate");
img2.onmouseout = function() {
Pixastic.revert(this);
threshold();
}
}
Here is the embed code for my video:
<video id="videotag" src="video.ogg" onclick="videoclick(this); desaturate(this)"
The video plays but is not desaturated by the function. I would really appreciate it if someone could help me out with this.
As far as I know there's no real support for that. But you can read about CSS filters here - http://updates.html5rocks.com/2011/12/CSS-Filter-Effects-Landing-in-WebKit . Apparently you may be able to desaturate in Firefox (didn't work for me, though).

trying to add a multi source video player with more then one video?

Im trying to make a video player work in all browsers. There is
more then one video and every time you click on demo reel it plays the
video and if you click the video 1 the other video plays. How can i
make them both work in all browsers? Here is my html and javascript
html
<video id="myVideo" controls autoplay></video>
<div>
Demo Reel</div>
video 1</div>
</div>
javascript
function changeVid1() {
var changeStuff = document.getElementById("myVideo");
changeStuff.src = "video/demoreel.mp4"
}
function changeVid2() {
var changeStuff = document.getElementById("myVideo");
changeStuff.src = "video/video1.mp4";
}
After you switch the source of the video, you need to run .load() on it to force it to load the new file. Also, you need to provide multiple formats, because there is no video codec supported by all browsers.
First, set up your sources like this:
var sources = [
{
'mp4': 'http://video-js.zencoder.com/oceans-clip.mp4',
'webm':'http://video-js.zencoder.com/oceans-clip.webm',
'ogg':'http://video-js.zencoder.com/oceans-clip.ogv'
}
// as many as you need...
];
Then, your switch function should look like this:
function switchVideo(index) {
var s = sources[index], source, i;
video.innerHTML = '';
for (i in s) {
source = document.createElement('source');
source.src = s[i];
source.setAttribute('type', 'video/' + i);
video.appendChild(source);
}
video.load();
video.play(); //optional
}
See a working demo here.
This gives the browser a list of different formats to try. It will go through each URL until it finds one it likes. Setting the "type" attribute on each source element tells the browser in advance what type of video it is so it can skip the ones it doesn't support. Otherwise, it has to hit the server to retrieve the header and figure out what kind of file it is.
This should work in Firefox going back to 3.5 as long as you provide an ogg/theora file. And it will work in iPads, because you only have one video element on the page at a time. However, auto-play won't work until after the user clicks play manually at least once.
For extra credit, you can append a flash fallback to the video element, after the source tags, for older browsers that don't support html5 video. (i.e., IE < 9 - though you'll need to use jQuery or another shim to replace addEventListener.)

Getting Current YouTube Video Time

I am writing a Browser Plugin and need to find a way to get the current time a YouTube Video playing on YouTube using JavaScript. I have been playing around in the Chrome JavaScript Console and haven't had any luck.
It appears that the chrome API only works with embedded video players not a video that is playing on on youtube.com. One option I looked into is in the share section of a video their is an input box for the "start at:" time that contains the current time of the video. I have tried using .value and .text on this input box and they both return undefined? Does anyone have any ideas?
ytplayer = document.getElementById("movie_player");
ytplayer.getCurrentTime();
See the api
Update: if it didn't work, also try player.playerInfo.currentTime (codepen live example)
Depends on what you want
player.getCurrentTime():Number
Returns the elapsed time in seconds since the video started playing.
player.getDuration():Number
Returns the duration in seconds of the currently playing video. Note
that getDuration() will return 0 until the video's metadata is loaded,
which normally happens just after the video starts playing.
http://code.google.com/apis/youtube/js_api_reference.html
Finally I found how to make it work on iOS (and Android too).
Actually, the whole youtube js api was broken for me if run on mobile browser.
Problem solved by creating player using new YT.Player as described in YouTube IFrame API.
Please note: only creating <iframe> from <div> placeholder works for mobile browsers at the time. If you try to use existing <iframe> in new YT.Player call, as mentioned in IFrame API, this will not work.
After player created, it's possible to use player.getCurrentTime() or player.getDuration() with player instance created.
Note: I had no luck calling this methods on player obtained with
player = document.getElementById(...) (from #JosephMarikle answer).
Only created player instance worked in mobile browsers.
Useful links:
YouTube IFrame API
YouTube JavaScript API
YouTube Player Demo
You can use Html5 Video API on youtube.com
var htmlVideoPlayer = document.getElementsByTagName('video')[0];
htmlVideoPlayer.currentTime
Note: It's not gonna work on Youtube Iframe API because Iframes are isolated. You cannot access the context of a Youtube IFrame .
In 2020, this works:
player.playerInfo.currentTime
full code:
see it live on codepen
Just FYI, There is a new iframe API for the YouTube player:
https://developers.google.com/youtube/iframe_api_reference
document.querySelector('video').currentTime
Stop at specific time youtube video and show notification box in GWD
<script>
var yid = document.getElementById("gwd-youtube_1");
var idBox = document.getElementById("box1");
pausing_function = function(event) {
var aa = setInterval(function() {
if (yid.getCurrentTime() > 8.0 && yid.getCurrentTime() < 8.1) {
yid.pause(yid);
idBox.style.opacity = 1;
console.log(yid.getCurrentTime() + "playing")
clearInterval(aa);
yid.removeEventListener("playing", pausing_function);
}
}, 100)
}
yid.addEventListener("playing", pausing_function);
var pausing_function_1 = function() {
if (yid.getCurrentTime() > 8.1) {
console.log(yid.getCurrentTime() + "pause")
// remove the event listener after you paused the playback
yid.removeEventListener("playing", pausing_function);
}
};
</script>
play video and hide notification
<script type="text/javascript" gwd-events="handlers">
window.gwd = window.gwd || {};
gwd.pauseVideo = function(event) {
var idBox = document.getElementById("box1");
idBox.style.opacity = 0;
};
</script>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>

Categories

Resources