I can't get youtube video to work with video.js
I added in the head :
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
Then in the body :
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360"
data-setup='{"techOrder":["youtube","html5"],"ytcontrols":false}'>
<source src="http://www.youtube.com/watch?v=qWjzVHG9T1I" type='video/youtube' />
But I have a black div (tested in latest Chrome & FF).
Am I missing something ?
Thanks
The pull request referenced above was closed, and somebody else took it over and made it a plugin, available from the video.js plugins wiki
You'll need that (or a similar) plugin to play youtube videos. There's an example of this working for the latest API here: enabling youtube playback with video.js wrapper
It appears that the Pull Request which add the Youtube Tech feature has not been merged yet.
Though it's getting old now: https://github.com/zencoder/video-js/pull/157
I wonder if we could have this soon or not at all :(
Related
Instead of using true gifs, we are using mp4 videos that loop (in order to save load time)
However, Safari is refusing to autoplay the videos, even with autoplay loop muted playsinline.
Is there a way to create looping videos/gifs that do not require large file sizes and can autoplay in mobile
My video tags look like:
<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
<source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
Your browser does not support video tag
</video>
Have also tried:
<video preload autoplay muted playsinline loop>
<source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
Your browser does not support video tag
</video>
In some cases I want the gif to start when a user scrolls to a specific point. So I use:
if (/* user scrolls to div */){
document.getElementById('my-video').play();
}
Is there a way to have videos autoplay in Safari, or any best practice alternatives?
Your HTML5 actually works fine with a different source video - the following runs in Safari 12.1.1 on Mac OSX 10.14.5:
<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
<source src= 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'>
Your browser does not support video tag
</video>
It may be that there was be an issue with the video source you were using or the network or server it is on - for example, it is very slow loading and won't play in Chrome or Safari when I test it directly.
If you are seeing the same issue with another video, it may be that there is a format issue or that there is some server to safari indication issue which have been seen previously, although the root cause is not clear at this time: Safari 9.0 can not play mp4 video on the storage server
Either way, there is nothing obvious wrong with your original HTML5 above.
For iOS, there are specific auto play rules - at the time of writing these are the most recent AFAIK (https://webkit.org/blog/6784/new-video-policies-for-ios/):
By default, WebKit will have the following policies:
I followed the instructions on this page
and the embedded Youtube playlist which should Autoplay is:
<iframe width="535" height="300" src="https://www.youtube.com/embed?listType=playlist&list=PL8kx4WFqlOK90fxZpao5k2WUEmSPchGhR&autoplay=1&loop=1" frameborder="0" allowfullscreen>
</iframe>
It does loop when it reaches the last clip, but it won't play automatically on page load. Is there a fix for this, please? Thanks.
PS. I know this question has been asked before, but I could not find a working solution for this.
Try this:
https://www.youtube.com/embed/videoseries?list=PLElJF-XLNL2Brb_dTiVNSe9qld1eR_Jft&autoplay=1&loop=1
Google Chrome:
Since Google Chrome removed non-muted autoplay functionality in version 66, you have to add the parameter "mute=1" in that browser.
Or change autoplay-policy in the chrome settings:
How to allow video autoplay in a Google Chrome kiosk app in version 66 or later
How to pause a youtube video when soundcloud audio paying and vise versa
<span class="soundcloud_embed" id="soundcloud_post_312">
<iframe id="ui-id-1" width="100%" height="300" scrolling="no"
frameborder="no" src="https://w.soundcloud.com/player/?
url=https%3A//api.soundcloud.com/tracks/163100334&
color=%23ff5500&
auto_play=false&hide_related=false&show_comments=true&
show_user=true&show_reposts=false&show_teaser=true&
visual=true">
</iframe>
</span>
<span class="youtube_embed" id="youtube_post_309">
<iframe id="ui-id-2" width="560"height="315" src="https://www.youtube.com/
embed/M7lc1UVf-VE" frameborder="0" gesture="media"
allow="encrypted-media" allowfullscreen></iframe>
</span>
I've found the source at this link
Pause Youtube embed when playing Soundcloud embed
http://jsfiddle.net/Lpq9n7ht/
If you need to control the player, you need IFrame API.
The IFrame player API lets you embed a YouTube video player on your
website and control the player using JavaScript.
Read through the documentation to get started. There is starter guide that will help you how to use the API. Codes are also available as your reference depending on the functions that you want to use.
For the requirements, remember this.
The user's browser must support the HTML5 postMessage feature. Most
modern browsers support postMessage, though Internet Explorer 7 does
not support it.
Can we add Youtube player in a HTML5 & javascript page without using flash. I need to make an application which uses youtubeplayer & could be played on differnet platoforms e.g. ios,android
(iOS doesn't support flash)
Here you have the code for embed videos with fallback to flash for those who doesn't support html5.
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
More info here http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
Or open them in a UIWebView? Their videos are in .swf format though.
Thank you.
EDIT: Okay, so I can get it to play in UIWebView, also when you click on the video in the UIWebView it will play the video in fullscreen. So am wondering if I can just get the code of when it clicks to fullscreen, and use it in some button I have.
Did that make sense?
Oh and thank you again.
Try embed the iframe snippet from Youku into your webview
<iframe height="498" width="510" frameborder="0" allowfullscreen
src="http://player.youku.com/embed/XNTY4ODU0NzQ0"></iframe>
I got it working on Android, but not tried it on iOS yet.
<video width="480" height="320"
src="http://v.youku.com/player/getRealM3U8/vid/XMzkxMTM3MDQw/type//video.m3u8"
controls>
<embed src="http://player.youku.com/player.php/sid/XMzkxMTM3MDQw/v.swf"
allowFullScreen="true" quality="high" width="480" height="320"
align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"></embed>
</video>
Just use the above HTML in a UIWebView for Youku. It can be played on iOS device and PC. Replace the XMzkxMTM3MDQw with the corresponding code of the video.
As you will easily be able to verify on the internet, Flash (.swf) is not supported on iOS devices. Maybe they offer their videos in another format, otherwise this won't work.
Update: I guess you're just opening the website in your web view. So that means on their web site they have an iOS compatible stream. You can fetch the stream data from the website's source code and build your own web site (stored locally on the device) that only displays that video stream in an UIWebView. Or you use MPMoviePlayer or HTTPLiveStream, whatever. However, make sure that this is allowed/legal, I can't help you there since I guess it heavily depends on what you want to do with your app.
See here to get the url of .m3u8 file for a youku video by its ID, and simply embed it into a <video> tag