We're developing an embeddable browser and at the moment we're in the process of adding MSE support (specifically targeting YouTube embedded videos, in order to be able to play higher quality videos).
We currently only support WebM (VP8/VP9 + vorbis) encoded videos. One of the issues we are facing right now is that YouTube refuses to serve us WebM videos and just falls back to non-MSE playback in most cases. This is an example of a video which is being served to us using MSE in WebM format. We are returning true to all video/webm and audio/webm (except opus) isTypeSupported calls.
How can we get YouTube to serve us WebM videos whenever possible? The way we're testing at the moment is either by directly opening a video through the YouTube website or by using an page which contains a single iframe for the video:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MSE Demo</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/YQKgBmb2WoU" frameborder="0" allowfullscreen></iframe>
</body>
</html>
This is the user agent we are currently identifying as:
Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.86 Safari/537.36
Related
How can I stream video files I have sitting in Google Cloud Storage on iOS?
If I try to play the video URL in iOS, the whole video gets downloaded and then played. That takes too long. I want to stream the video in 10 second chunks.
Google's Cloud Storage allows you to stream data to mobile making use of Signed URLs and a front-end or an app that serves the content.
It's really important to first set the right Content-Type in your objects of Cloud Storage. If not, the browser will download the file instead of playing it.
This would be the steps for this approach:
First you'll need to create the Signed URL of the content you want to serve using gcloud commands:
gsutil signurl -d 10m Desktop/private-key.json gs://example-bucket/cat.jpeg
Or it can also be done with third party libraries. In this other post they show how to do it with python.
Serve the result link on the front-end/app you want to present the content. Here is an HTML example:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="video-signedurl.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
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 have a channel in youtube and want to show in my website the live stream videos, if I have a live stream in youtube.
I have followed instructions from https://www.youtube.com/features and enabled both "Live Stream" and "Embed live streams" options, but every time I have a live stream the youtube shows me "Live stream offline" on player.
I have embed the iframe in my website like this
<iframe width="650" height="400" src="https://www.youtube.com/embed/live_stream?channel=myChannelId" allow="autoplay" frameborder="0" allowfullscreen></iframe>
also I have tried setup this gaming url
<iframe width="650" height="400" src="https://gaming.youtube.com/embed/live_stream?channel=myChannelId" allow="autoplay" frameborder="0" allowfullscreen></iframe>
And also I cannot enable "Monetization" from features, because it is disabled and not available from our country.
Can anybody help me to find a solution ?
This works for me. Same as you minus the allow autoplay property.
<iframe width="100%" height="602" src="https://www.youtube.com/embed/live_stream?channel=MyChannelId" frameborder="0" allowfullscreen></iframe>
There is a brief delay, and sometimes you have to refresh the page.
I'm using django and so my templates look like this:
<video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid">
<source src="{{page.video.url}}" type="video/mp4">
</video>
The videos work fine on Linux and Microsoft but are not working on Apple devices. Why?
How are you serving the video files? If you are using Django's built in server you will find that the videos will not load due to Django's server does not support byte range requests. See this thread:
https://groups.google.com/forum/#!msg/django-developers/NZ1qTkZ6vok/fhdz7rTtL1EJ
And this ticket:
https://code.djangoproject.com/ticket/22479
I'm afraid the answer is rather mundane. I've tried using different video editing software to render the videos to h.264 codec and it now works. It seems the software I was using is not doing something right for Apple?
I am using embedded Vevo videos in JW player. It is working fine in Firefox, but it displays an error on Chrome and Safari:
error loading Youtube embedding not allowed
Here is my code:
<html>
<head>
<script src="http://jwpsrv.com/library/2121212121.js"></script>
</head>
<body>
<div id="container-video">
<script type='text/javascript'>
jwplayer("container-video").setup({
file: "http://www.youtube.com/watch?v=j5-yKhDd64s",
width: 545,
height: 350
});
</script>
</div>
</body>
</html>
Vevo has a special license with YouTube hence, it is not possible to embed them. Let me explain this: You may have seen in YouTube Studio that there is an option that you can toggle to allow or disallow embedding video on the website. This is what Vevo does to its video, Vevo has disallowed embedding.
Youtube Embedded Allow-Disallow Image