Since some days I am trying to get a video source in m3u8 format running as html in the browser. I researched alot and couldn´t find a working solution.
When I was about to quit I accidently found out that the code I have is running on my macbook (before I was developing and testing on a windows machine)...on every browser.
So again I started to research, but still no solution. I know that there is a solution, because the video source I am trying to play is scraped from a website in which I can watch the video on any plattform.
So I tryed to investigate the source website a bit more and found out that it is using jwplayer. Still not able to get it run.
So that is my current HTML-Code (which is running in macos -> Chrome, Safari and Firefox:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<style>
LEFT OUT BECAUSE OF LINE LIMIT AT STACKOVERFLOW
</style>
</head>
<body>
<video id="video" style="width: 100%; height: 100%;" controls></video>
<script>
function playM3u8(url){
if(Hls.isSupported()) {
var video = document.getElementById('video');
video.volume = 1.0;
var hls = new Hls();
var m3u8Url = decodeURIComponent(url)
hls.loadSource(m3u8Url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
}
playM3u8("https://load.hdfilme.ws/hls/9618d6f005e7bf049e324b543727184e/9618d6f005e7bf049e324b543727184e.m3u8")
</script>
</body>
</html>
Research:
How do i embed this m3u8 into jw player
How do we download a blob url video
Playing m3u8 Files with HTML Video Tag
And alot more but don´t want to spam in here...
Someone knows how to solve that and get the video playing on every plattform? Which player to use and how do the code for that look like? Many thanks in advance!
Refering to your other question: Why is link only working from macos operating system
One of the problems is that you have no access to the ressource you are trying to let the videoplayer play. I am not sure if and how you could add the missing headers property from my answer in your other question, but that is the way to go.
Related
I've recently started programming within the Tizen environment and SDK, and I am trying to create a (Samsung)smart-tv application which takes mp4-media links and display those links in form of a video-player, the problem is that whenever I use the html5 video tag, the application takes ages (2-4 minutes) to load, and a lot of the time it doesn't even load at all.
The code has been tested on JsFiddle and locally, and it works perfectly fine there, but whenever I try to execute the same code within the index.html in the Tizen project (which runs in a Samsung TV emulator) it exhibits the behavior I just explained (extremely slow/crashing).
Here are some examples of what I tried:
<html>
<head>
<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto'
width='640' height='264'
poster="download.jpg" data-setup='{}'>
<source src='sample.mp4' type='video/mp4'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.5.4/video.js'></script>
</body>
</html>
I have also tried without the use of video-js, I tried only using the video element, but the same result, it would sometimes work, sometimes not, and when it would work, it would take a long time before it actually loaded. According to the documentations, HTML5 is supported, and the use of the video tag is even "encouraged" by the guides they published. I have also tried generating the HTML with javascript and trying to make it work like that, but no luck.
It could be the video tag implementation of the emulator, codec, etc. I assume that you can't test the code on an actual Tizen TV device so I would suggest adding the event listeners first, and see what's happening, then try the AVPlay API, which I would recommend implementing in your apps.
<body>
<video id='video' width='700' height='400'
poster='yourPosterURI' src='yourVideoURI'
controls style='background:black'>
</video>
</body>
var videoElement = document.getElementById('video');
videoElement.addEventListener('loadeddata', function() {
console.log('Video loaded.');
});
videoElement.addEventListener('timeupdate', function() {
console.log('Current time: ' + videoElement.currentTime);
});
videoElement.addEventListener('seeked', function() {
console.log('Seek operation completed.');
videoElement.play();
});
videoElement.addEventListener('stalled', function() {
console.log('Video stalled.');
});
videoElement.addEventListener('ended', function() {
console.log('Video ended.');
});
I'm trying to put a YouTube video source into the HTML5 <video> tag, but it doesn't seem to work. After some Googling, I found out that HTML5 doesn't support YouTube video URLs as a source.
Can you use HTML5 to embed YouTube videos? If not, is there any workaround?
This answer does not work anymore, but I'm looking for a solution.
As of . 2015 / 02 / 24 . there is a website (youtubeinmp4) that allows you to download youtube videos in .mp4 format, you can exploit this (with some JavaScript) to get away with embedding youtube videos in <video> tags. Here is a demo of this in action.
##Pros
Fairly easy to implement.
Quite fast server response actually (it doesn't take that much to retrieve the videos).
Abstraction (the accepted solution, even if it worked properly, would only be applicable if you knew beforehand which videos you were going to play, this works for any user inputted url).
##Cons
It obviously depends on the youtubeinmp4.com servers and their way of providing a downloading link (which can be passed as a <video> source), so this answer may not be valid in the future.
You can't choose the video quality.
###JavaScript (after load)
videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
var video = videos[i];
var src = video.src || (function () {
var sources = video.querySelectorAll("source");
for (var j = 0, sl = sources.length; j < sl; j++) {
var source = sources[j];
var type = source.type;
var isMp4 = type.indexOf("mp4") != -1;
if (isMp4) return source.src;
}
return null;
})();
if (src) {
var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
if (isYoutube) {
var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
id = (id.length > 1) ? id.splice(1) : id;
id = id.toString();
var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
video.src = mp4url + id;
}
}
}
###Usage (Full)
<video controls="true">
<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>
Standard video format.
###Usage (Mini)
<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>
A little less common but quite smaller, using the shortened url youtu.be as the src attribute directly in the <video> tag.
I have created a realtively small (4.89 KB) javascript library for this exact functionality.
Found on my GitHub here: https://github.com/thelevicole/youtube-to-html5-loader/
It's as simple as:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader#2.0.0/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
Working example here: https://jsfiddle.net/thelevicole/5g6dbpx3/1/
What the library does is extract the video ID from the data attribute and makes a request to the https://www.youtube.com/get_video_info?video_id=. It decodes the response which includes streaming information we can use to add a source to the <video> tag.
UPDATE June 2021
YouTube have recently updated their API which has broken previous versions of this package. Please now use versions 4.0.1 and up! Updated example:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader#4.0.1/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
https://jsfiddle.net/thelevicole/5g6dbpx3/2/
The <video> tag is meant to load in a video of a supported format (which may differ by browser).
YouTube embed links are not just videos, they are typically webpages that contain logic to detect what your user supports and how they can play the youtube video, using HTML5, or flash, or some other plugin based on what is available on the users PC. This is why you are having a difficult time using the video tag with youtube videos.
YouTube does offer a developer API to embed a youtube video into your page.
I made a JSFiddle as a live example: http://jsfiddle.net/zub16fgt/
And you can read more about the YouTube API here: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
The Code can also be found below
In your HTML:
<div id="player"></div>
In your Javascript:
var onPlayerReady = function(event) {
event.target.playVideo();
};
// The first argument of YT.Player is an HTML element ID.
// YouTube API will replace my <div id="player"> tag
// with an iframe containing the youtube video.
var player = new YT.Player('player', {
height: 320,
width: 400,
videoId : '6Dc1C77nra4',
events : {
'onReady' : onPlayerReady
}
});
Step 1: add &html5=True to your favorite youtube url
Step 2: Find <video/> tag in source
Step 3: Add controls="controls" to video tag: <video controls="controls"..../>
Example:
<video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
Note there seems to some expire stuff. I don't know how long the src string will work.
Still testing myself.
Edit (July 28, 2011): Note that this video src is specific to the browser you use to retrieve the page source. I think Youtube generates this HTML dynamically (at least currently) so in testing if I copy in Firefox this works in Firefox, but not Chrome, for example.
how about doing it the way hooktube does it? they don't actually use the video URL for the html5 element, but the google video redirector url that calls upon that video. check out here's how they present some despacito random video...
<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>
the code is for the following video page https://hooktube.com/watch?v=72UO0v5ESUo
youtube to mp3 on the other hand has turned into extremely monetized monster that returns now download.html on half of video download requests... annoying...
the 2 links in this answer are to my personal experiences with both resources. how hooktube is nice and fresh and actually helps avoid censorship and geo restrictions.. check it out, it's pretty cool. and youtubeinmp4 is a popup monster now known as ConvertInMp4...
In case anyone stumbles upon this question, a neat way to embed YouTube video is to use embed tag, like so:
<embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">
The easiest answer is given by W3schools.
https://www.w3schools.com/html/html_youtube.asp
Upload your video to Youtube
Note the Video ID
Now write this code in your HTML5.
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>
With the new iframe tag embedded in your website, the code will automatically detect whether you are using a browser that supports HTML5 or not.
The iframe code for embedding YouTube videos is as follows, simply copy the Video ID and replace in the code below:
<iframe type="text/html"
width="640"
height="385"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>
Im trying out the new and exciting features of chrome canary 19.
I can basically grab the video from the web-cam and set it to a source element for a video tag.
<!DOCTYPE html>
<html>
<head>
<title>Camera capture</title>
<script>
var localStream;
var localStreamObjUrl;
window.onload = function() {
navigator.webkitGetUserMedia("audio, video", gotStream);
}
function gotStream(stream) {
localStream = stream;
localStreamObjUrl = webkitURL.createObjectURL(localStream);
var video = document.getElementById("selfView");
video.src = localStreamObjUrl;
}
</script>
</head>
<body>
<video id="selfView" autoplay audio=muted></video>
</body>
</html>
From the example at https://apprtc.appspot.com, we can grab the video and stream it to a peer...
My question is, can I avoid doing all the traversal to get a p2p connection and directly upload the video to a server? Id like to be able to relay the video stream instead of sending it p2p.
You need some kind of streaming media server on the back.
The process would be:
capture the feed
send it to the server
transcode to various client formats
manage the outbound streams
There are numerous free and paid varieties available:
nodejs(demo/POC)
wowza(paid)
chrome based
More about transcoding: xuggler
The 'swiss army knife' of media: ffmpeg
and so on.
I have developed video recording solutions for the better part of the last 5 years and contributed a lot to fixing video recording bugs in Red5.
On the desktop you can use a Flash client + a media server (Red5, Wowza, Adobe Media Server) and on the mobile you can use HTML Media Capture.
I gave a detailed answer on a similar question at Record video on browser and upload to LAMP server
You can try nimbb, in which they have Flash-based and HTML5 capturing. After that, you can push the video to Brightcove to transcode it to various clients format.
They have API integration. The only issue is the cost.
If I have .flv files on my server at some location like http://www.example.com/archive/test.flv. In HTML page how can I tell the browser to use Flash player to play this video like youtube videos are played.
Can someone tell me how to do this?
PS: I am noober than noob in web dev, so please give some code snippet or answers that beginners like me can understand. Thank you
You will have to create or find an existing video player SWF; there is no built-in Flash video player. I've found JW Player to work pretty well.
Update:
Here's a sample of how you can embed the JW Player:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { file:'yourvideofile.flv',autostart:'true' };
var params = { allowfullscreen:'true', allowscriptaccess:'always' };
var attributes = { id:'player1', name:'player1' };
swfobject.embedSWF('player.swf','player','480','270','9.0.115','false',
flashvars, params, attributes);
</script>
</head>
<body>
<div id="player"></div>
</body>
</html>
You can use this one to make a player for your flv file:
http://oos.moxiecode.com/flvplayer/
If you happen to have Dreamweaver, you can embed an flv video in a few seconds (it handles the embedding the associated code and resources.)
If not, you can find nice flash video players for download (free or paid) by googling. For instance, here's an option that offers free and paid alternatives:
Flow player
And, additionally, you could upload the video to youtube and just embed the code on your site for playing, too.
I'm trying to put a YouTube video source into the HTML5 <video> tag, but it doesn't seem to work. After some Googling, I found out that HTML5 doesn't support YouTube video URLs as a source.
Can you use HTML5 to embed YouTube videos? If not, is there any workaround?
This answer does not work anymore, but I'm looking for a solution.
As of . 2015 / 02 / 24 . there is a website (youtubeinmp4) that allows you to download youtube videos in .mp4 format, you can exploit this (with some JavaScript) to get away with embedding youtube videos in <video> tags. Here is a demo of this in action.
##Pros
Fairly easy to implement.
Quite fast server response actually (it doesn't take that much to retrieve the videos).
Abstraction (the accepted solution, even if it worked properly, would only be applicable if you knew beforehand which videos you were going to play, this works for any user inputted url).
##Cons
It obviously depends on the youtubeinmp4.com servers and their way of providing a downloading link (which can be passed as a <video> source), so this answer may not be valid in the future.
You can't choose the video quality.
###JavaScript (after load)
videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
var video = videos[i];
var src = video.src || (function () {
var sources = video.querySelectorAll("source");
for (var j = 0, sl = sources.length; j < sl; j++) {
var source = sources[j];
var type = source.type;
var isMp4 = type.indexOf("mp4") != -1;
if (isMp4) return source.src;
}
return null;
})();
if (src) {
var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
if (isYoutube) {
var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
id = (id.length > 1) ? id.splice(1) : id;
id = id.toString();
var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
video.src = mp4url + id;
}
}
}
###Usage (Full)
<video controls="true">
<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>
Standard video format.
###Usage (Mini)
<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>
A little less common but quite smaller, using the shortened url youtu.be as the src attribute directly in the <video> tag.
I have created a realtively small (4.89 KB) javascript library for this exact functionality.
Found on my GitHub here: https://github.com/thelevicole/youtube-to-html5-loader/
It's as simple as:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader#2.0.0/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
Working example here: https://jsfiddle.net/thelevicole/5g6dbpx3/1/
What the library does is extract the video ID from the data attribute and makes a request to the https://www.youtube.com/get_video_info?video_id=. It decodes the response which includes streaming information we can use to add a source to the <video> tag.
UPDATE June 2021
YouTube have recently updated their API which has broken previous versions of this package. Please now use versions 4.0.1 and up! Updated example:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader#4.0.1/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
https://jsfiddle.net/thelevicole/5g6dbpx3/2/
The <video> tag is meant to load in a video of a supported format (which may differ by browser).
YouTube embed links are not just videos, they are typically webpages that contain logic to detect what your user supports and how they can play the youtube video, using HTML5, or flash, or some other plugin based on what is available on the users PC. This is why you are having a difficult time using the video tag with youtube videos.
YouTube does offer a developer API to embed a youtube video into your page.
I made a JSFiddle as a live example: http://jsfiddle.net/zub16fgt/
And you can read more about the YouTube API here: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
The Code can also be found below
In your HTML:
<div id="player"></div>
In your Javascript:
var onPlayerReady = function(event) {
event.target.playVideo();
};
// The first argument of YT.Player is an HTML element ID.
// YouTube API will replace my <div id="player"> tag
// with an iframe containing the youtube video.
var player = new YT.Player('player', {
height: 320,
width: 400,
videoId : '6Dc1C77nra4',
events : {
'onReady' : onPlayerReady
}
});
Step 1: add &html5=True to your favorite youtube url
Step 2: Find <video/> tag in source
Step 3: Add controls="controls" to video tag: <video controls="controls"..../>
Example:
<video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
Note there seems to some expire stuff. I don't know how long the src string will work.
Still testing myself.
Edit (July 28, 2011): Note that this video src is specific to the browser you use to retrieve the page source. I think Youtube generates this HTML dynamically (at least currently) so in testing if I copy in Firefox this works in Firefox, but not Chrome, for example.
how about doing it the way hooktube does it? they don't actually use the video URL for the html5 element, but the google video redirector url that calls upon that video. check out here's how they present some despacito random video...
<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>
the code is for the following video page https://hooktube.com/watch?v=72UO0v5ESUo
youtube to mp3 on the other hand has turned into extremely monetized monster that returns now download.html on half of video download requests... annoying...
the 2 links in this answer are to my personal experiences with both resources. how hooktube is nice and fresh and actually helps avoid censorship and geo restrictions.. check it out, it's pretty cool. and youtubeinmp4 is a popup monster now known as ConvertInMp4...
In case anyone stumbles upon this question, a neat way to embed YouTube video is to use embed tag, like so:
<embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">
The easiest answer is given by W3schools.
https://www.w3schools.com/html/html_youtube.asp
Upload your video to Youtube
Note the Video ID
Now write this code in your HTML5.
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>
With the new iframe tag embedded in your website, the code will automatically detect whether you are using a browser that supports HTML5 or not.
The iframe code for embedding YouTube videos is as follows, simply copy the Video ID and replace in the code below:
<iframe type="text/html"
width="640"
height="385"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>