The title pretty much sums my question up. I've given a cursory glance to https://developers.google.com/youtube/iframe_api_reference and have searched online but all I have found are explanations on how to get an embedded video to autoplay (the first video only) while preventing the suggested videos list at the end. I think that perhaps the logic for playing suggested videos is only supported on youtube.com itself, a conclusion that might be supported by the autoplay button being outside of the video element.
As a worst case solution, I thought maybe if I could save a youtube.com page to my desktop I could modify the styling to only show the video. But alas, the page breaks when I try to load it from my hard drive as opposed to the website.
Edit: Take note that I'm talking about two different types of autoplay here. One is the autoplaying of suggested videos as seen in the picture, and that is the type of autoplay I want to be able to use in an embedded player. The other type of autoplay that I don't need help with is getting the embedded player to automatically play the video that is contained in its iframe src, aka the first video.
Since you marked iframe under your tags and I can't comment, I will try to answer.
If you're using iframe then make sure
autoplay=1"
is on
<iframe id="ytplayer" type="text/html" width="720" height="405"src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1"frameborder="0" allowfullscreen>
I found a link that will build it for you. It was a bit into the api link you gave.
https://developers.google.com/youtube/youtube_player_demo
You can give it the video and tell it what you want it to do.
Related
I am creating a single page website on squarespace and I added a background video using Iframe and grabbing src from vimeo. I have researched and learned that safari does't play videos if they are not muted, so I attempted to mute and added other suggestions like inline but still the video won't play. I have also noticed though that on my friends Iphone 10 it worked, and on someone else's Iphone 10 it didn't? I made sure both had low power mode off so I am not sure if it's my code or if it could be possible settings differences they both have? Here is the Iframe code. Also here is the squarespace website, password is david. (if you open this on mobile ignore the big font I haven't adjusted size on that yet). Any potential leads or tips would greatly help! I have been going in circles all weekend trying to get to the bottom of this.
<iframe id="v0" src="https://player.vimeo.com/video/318621793?background=1&autoplay=1&loop=1&byline=0&title=0&playsinline=0&muted=1" frameborder="0" webkitallowfullscreen playsinline autoplay mozallowfullscreen allowfullscreen muted >
</iframe>
You may need to include most Video.type like mp4, MPEG-4,etc..
For all platform
I would like to display a webpage with a wall of very short videos:
The videos are 1-2s long and all the same size (about 100px wide)
They are display in the form of a matrix (e.g. 10x10)
Playing the videos is triggered by user interaction (click or hover)
So far, I have tried inserting video tags using jQuery but when I reach about 60 videos, my browser (Chrome) hangs.
My question: is there a trick to display such a large quantity of videos on a single web page and what issue should I look out for to make sure the videos are ready to play before the user starts to interact.
EDIT: I understand this isn't common practice, but this project is an art installation and I need to be able to trigger all the videos (or moving images) on demand and without delay. On the other hand, the initial loading time doesn't matter so much, as the user will be made aware of the heavy load.
Thanks :)
IMO "videos are ready (...) before the user starts to interact" contradicts a leightweight DOM. You cannot have both. I'd try to show thumbnails and initialize the video with the interaction.
you could try to use the
use the
<video width="320" height="240" controls>
<source src="embed Link" type="video/mp4">
Your browser does not support the video tag.
</video>
tag inside of html. then you can acces every object by giving it a tag
I am making a fan site for a music artist and I am having trouble with finding a reliable way to stream the music on the site. I have tried many different methods and none are giving me the results I am looking for.
I need the player to accept a direct URL as the source for the audio. As well as working on as many operating systems/browsers as possible. All of my audios are in mp3 format.
I currently have it working, but for some reason it seems like a hit or miss when the page loads some of the players work, some don't.
I have tried different hosting services and that didn't make a difference, so the issue is within the player itself.
I have modded this player to use in my site. This is the best of the many that I've tried, but if only it would load the songs more reliably I would be happy.
http://designmodo.com/audio-player/
And this is my audio tag in html.
<div class="audio-player">
<h1> Yea</h1> <h2> May 23, 2016</h2>
<h3> Lil Uzi Vert </h3>
<img class="cover" src="../playerimgs/cover.png">
<audio preload class="part14" src="http://dopefile.pk/mp3embed-df1s7uzu0d6b.mp3" type="audio/mp3" controls="controls"></audio>
</div>
I have many players on the same page. Some of them work on initial page load, and some of them require many refresh clicks to actually load. This is not practical.
So I am looking for one of two things,
1- How to fix my player so it is always working on initial load.
2- A different music player that is more reliable.
I know this idea is not impossible, but I am not having any luck finding the best way to do this. I've searched and used over a dozen different players and none work as much as this one. The only problem I am having with this setup is the music players not always working for some odd reason.
I can add the javascript if necessary, but I did not edit that at all.
Also, I do not plan on embedding other players in my site. I have tried this already and it is not efficient at all.
Thanks for any help or advise.
This website is a great example of what I would like my player to be like.
https://jams.to/
And this is my temporary page that I am working with my players on,
http://www.luvallday.com/Posts/Allsongs.aspx
I've done some work integrating audio into HTML5 games/interactive experiences, and the best library I've worked with so far is Howler. Very clean and easy to use API, and it performed very well cross-browser.
If you want your music to play automatically when page loads just add the "autoplay" attribute to the element tag...
Example :
<audio class="part14" src="http://dopefile.pk/mp3embed-df1s7uzu0d6b.mp3" type="audio/mp3" controls="controls" autoplay></audio>
Rare but if autoplay fails:
<script>
if(document.readyState == "complete"){
//grab the first player
var player = document.getElementsByTagName('audio')[0];
//play it
player.play();
}
</script>
Or
If you are more advanced I'd recommend wavesurfer.js , it gives a good music player for visuals ..
Here : http://wavesurfer-js.org/
So I found this player call Amazing Audio Player and it is pretty great. It worked well for what I wanted to do.
I am trying to use a YouTube video as a website background with the following restrictions:
1. play only a portion of the video (say, from 8s to 20s)
2. loop only this portion of the video
3. remove the loading .gif between video loopings
The issue is that the video loops from the very start after playing from the specified time. I Googled looping a portion of video but i couldn't fix it. Following is my code:
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/lknBm2wGm0k?
autoplay=1
&controls=0
&showinfo=0
&autohide=1
&start=30
&end=40
&playlist=lknBm2wGm0k
&loop=1
&rel=0"></iframe>
Please help me fix 2. and 3. The question may be a possible duplicate of this but I wish to avoid the re-loading between loops as well, i.e. replay the already buffered video.
A flash background is a mess... Btw try to upload your own video or maybe postprocess the video yourself so you can use it without limitations.
Quick question: I have an HTML document playing HTML5 Audio. Nothing fancy. Textbook really.
<audio id="audioclip" preload="auto" loop >
<source src="audio/music01.ogg" type="audio/ogg">
</audio>
The same HTML document features an iframe containing a few Images. Clicking on one of these images browses to a page containing an autostart HTML5 video clip.
Of course now the audio from the parent AND the audio from the iframe video play at the same time.
Is there an EASY way to stop the parent audio playback from inside the iframe automatically when the autoplay video triggers?
I found some pretty complicated stuff for parent/child communication. Far to sophisticated for me. But I also found this little snippet:
jQuery(function($) {
parent.$("#parent_element").trigger(event);
} (window.jQuery));
Could I put that to use in my case?
Or are there alternatives?
Just getting into JavaScript a little more, atm I'd consider myself a newbie. :-\
Many Thanks!
PS: On video end the iframe page automatically browses back to the previous page. It would be super-nifty if the audio would resume playing at the Point IF it was playing before. If not then...well...not. But I reckon that would be much more complex?