Develop Reference

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 use iOS playsinline with 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');

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 to read all video type in a video tag

I make a web interface for my server and I want to read all my video, but I have some problems:
When I change the innerHTML (in javascript) of my video tag with a new source tag, it keep playing the previous video then I need to refresh the page between each video, but if I write the video url in the src attribute of my video tag I don't have this problem, but can I place the type attribute of the source tag in the video tag ?
Answered
I have many mkv file, I have no problems about the video but the audio doesn't work, ac3 for most of them, I need to specify codecs in the type attribute, but how can I know what are codecs of a video file in php ?
.avi doesn't work, can I read them with the correct value in attribute type ? if yes what is this value ?
Then I think I need an advanced guide about the type attribute with all possible value, where can I found it ? all guide I found were not detailed enough.
Sorry for my english, if there is something you don't understand tell me and I will correct or explain it.
Thank you for your help.
EDIT :
I come just to discover the track tag then... ^^ how can I extract a .vtt file with subtitles from a .mkv in php ?
If u have an answer just to one of my questions or an early answer post it pls, I search on my side.
EDIT 2 :
Now I can change the source tag and it change the video, but I still need answers to other questions.

Please note that by far very few codecs are supported by browsers. You should have at least 2 versions of each video: ogg and mp4; if you can get webm as well, that'll be a bonus. mkv are not normally supported by any browser, especially ac3 encoding.
Now, provided you have the right format videos, if you simply change the innterHTML to specify a new video source, the currently playing video won't stop. You need to actually stop it first, set the new one, then start playing it. For example, if you have in your html:
<video id='video-player' controls></video>
Then you can use a javascript similar to this:
function playVideo(name) {
var video = document.getElementById('video-player');
if(!video.paused) {
video.pause();
}
while(video.firstChild) {
video.removeChild(video.firstChild);
}
var source = document.createElement('source');
if(video.canPlayType('video/ogg')) {
source.type = 'video/ogg';
source.src = name + '.ogg';
} else if(video.canPlayType('video/webm')) {
source.type = 'video/webm';
source.src = name + '.webm';
} else if(video.canPlayType('video/mp4')) {
source.type = 'video/mp4';
source.src = name + '.mp4';
}
video.appendChild(source);
video.load();
video.currentTime = 0;
video.play();
}
Note that I haven't tested this code, so you may need to make some adjustments for it to work.

Playing dynamically embedded sound object via Javascript

I need to background load some WAV files for an HTML page using AJAX. I use AJAX to get the details of the WAV files, then use the embed tag, and I can confirm that the files have loaded successfully because when I set autostart to true, the files play. However, I need the files to play only when the user clicks on a button (or an event is fired). The following is my code to preload these files:
function preloadMedia() {
for(var i = 0; i < testQuestions.length; i++) {
var soundEmbed = document.createElement("embed");
soundEmbed.setAttribute("src", "/media/sounds/" + testQuestions[i].mediaFile);
soundEmbed.setAttribute("hidden", true);
soundEmbed.setAttribute("id", testQuestions[i].id);
soundEmbed.setAttribute("autostart", false);
soundEmbed.setAttribute("width", 0);
soundEmbed.setAttribute("height", 0);
soundEmbed.setAttribute("enablejavascript", true);
document.body.appendChild((soundEmbed));
}
}
I use the following code to play the file (based on what sound file that user wants to play)
function soundPlay(which) {
var sounder = document.getElementById(which);
sounder.Play();
}
Something is wrong here, as none of the browsers I have tested on play the files using the code above. There are no errors, and the code just returns.
I would have left it at that (that is - I would have convinced the client to convert all WAV's to MP3 and use MooTools). But I realized that I could play the sound files, which were not dynamically embeded.
Thus, the same soundPlay function would work for a file embeded in the following manner:
<embed src="/media/sounds/hug_sw1.wav" id="sound2" width="0" heigh="0" autostart="false" enablejavascript="true"/>
anywhere within the HTML.
And it plays well in all the browsers.
Anyone have a clue on this? Is this some sort of undocumented security restriction in all the browsers? (Please remember that the files do get preloaded dynamically, as I can confirm by setting the autostart property to true - They all play).
Any help appreciated.

Hmm.. perhaps, you need to wait for the embed object to load its "src" after calling preloadMedia() ?
Are you sure that the media file is loaded when you call soundPlay() ?

i know your question got a bit old by now, but in case you still wonder...
soundEmbed.setAttribute("id", testQuestions[i].id);
you used the same id twice, yet getElementById returns only one element, or false if it doesn't find exactly one matching element.
you could try something like this:
soundEmbed.setAttribute("id", "soundEmbed_"+testQuestions[i].id);
always keep in mind that an id must be unique

Just a tip for more compatibility:
I read here that width and height need to be > 0 for Firefox on MacOS.