I am trying to stream HLS media trough videojs, but its not working.
I am aware that desktop browsers do not support HLS, but its not working on android/ios devices also...
I get an error: no compatible source was found for this video
Can anyone take a look at my code, and spot any errors?
Streams are working on my local server, tested with VLC so problem must be somewhere on my configuration of videojs.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="http://belelros.github.io/videojs-playLists/css/main.css" rel="stylesheet">
<link href="http://belelros.github.io/videojs-playLists/css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9/video.js"></script>
<script src="https://rawgithub.com/Belelros/videojs-playLists/master/lib/videojs-playlists.js" data-cover></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<div class="video-holder centered">
<video id="video" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="640"
data-setup=''
poster="">
</video>
<div class="playlist-components">
<script>
var videos = [
{
src : [
'http://192.168.1.165/streamtest1.m3u8'
],
poster : 'images/bbc_news.png',
title : 'BBC WORLD NEWS'
},
{
src : [
'http://192.168.1.165/streamtest2.m3u8'
],
poster : 'images/al_jazeera_english.png',
title : 'AL JAZEERA'
},
{
src : [
'http://192.168.1.165/streamtest3.m3u8'
],
poster : 'images/viasat_explore.png',
title : 'Viasat Explore'
}
];
</script>
<div class="playlist">
<ul></ul>
</div>
</div>
</div>
</body>
</html>
I am using a playlist plugin for videojs
https://github.com/jgallen23/videojs-playLists
Maybe i should define video type somewhere?
I fixed it, added m3u8 extension to videojs-playlist.js
player.pl._guessVideoType = function(video){
var videoTypes = {
'webm' : 'video/webm',
'mp4' : 'video/mp4',
'm3u8' : 'application/x-mpegURL',
'ogv' : 'video/ogg'
};
Please add hls support using following
npm install --save videojs-contrib-hls.js
OR
Include videojs-contrib-hls.js from CDN.
https://unpkg.com/videojs-contrib-hls.js#3.2.0/dist/videojs-contrib-hlsjs.min.js
Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not natively supported.
Included in video.js 7 by default!
have a look here
Related
Audio does not play on both Chrome and Firefox. Why?!
https://jsfiddle.net/8udfegbq/
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<audio id="my-audio" class="video-js" controls="controls" preload="auto" data-setup="{}">
<source/>
<p>
To hear this audio please enable JavaScript, and consider upgrading to a
web browser that
supports HTML5 audio
</p>
</audio>
<script>
function displayVideo(id, link) {
link = "https://arweave.net/eAESnl8QnIw9gG4Wj1RvK3dlLepMlIsDEGiYNqTp_zw";
$.ajax(link, {method: 'HEAD'})
.then(function(data, textStatus, xhr) {
console.log("Loaded.")
const type = "audio/wav";
const source = $(`#${id}audio source`);
source.attr('src', link);
source.attr('type', type);
})
}
displayVideo('my-', "https://arweave.net/eAESnl8QnIw9gG4Wj1RvK3dlLepMlIsDEGiYNqTp_zw");
</script>
</body>
</html>
After setting the attribute on the source element, tell the audio element to load the source. This should do the trick:
$("#my-audio")[0].load();
I am trying to insert a Facebook embed video on my HTML code. Following is the sample code provided in the Facebook player documentation.
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId: "{your-app-id}",
xfbml: true,
version: "v3.2"
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe("xfbml.ready", function(msg) {
if (msg.type === "video") {
my_video_player = msg.instance;
}
});
};
</script>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-allowfullscreen="true"></div>
</body>
</html>
But on iOS devices, it is playing only in fullscreen mode. Is there a way I can play video without going to fullscreen?
Thanks!
i am programming a website with Bootstrap and the family/forest one page template (on themeforest.net), i customized the portfolio section of this template to have a video popup when we click on the thumbnail (instead of a full image popup originally).
The popup works perfectly with the 'mfp-iframe' class and the 'video/video_name.mp4' href, so here the code:
I don't wanna use a mp4 video but a vimeo video and it s not working when i replace the href 'video/video_name.mp4' by a vimeo link 'https://vimeo.com/118901221' or a embed vimeo link 'https://player.vimeo.com/video/118901221'
Please somebody can help to resolve that issue.
You just need the following codes below and try to analyze my problem about Vimeo last time MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup. If ever you encounter my problem in Vimeo.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Magnific Popup CSS-->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
</head>
<body>
<a class="vimeo-video-1" href="#">CLICK ME TO POP-UP 1 VIDEP</a><br>
<a class="vimeo-video-more" href="#">CLICK ME TO POP-UP MORE VIDEO</a>
<!--Jquery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Magnific Popup JS -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
</body>
</html>
<script type="text/javascript">
$('.vimeo-video-1').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
}],
gallery: {
enabled: false
},
type: 'image'
});
//MORE VIMEO VIDEO
$('.vimeo-video-more').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
},
{
src: 'https://player.vimeo.com/video/211690338',
type: 'iframe' // this overrides default type
},],
gallery: {
enabled: true
},
type: 'image'
});
</script>
You need to supply the direct link to the video. In the case of vimeo, this is only available if you've paid for a premium account. A solution would be to re-upload the video to YouTube and then get the direct link by doing this:
Copy the full URL to the video on YouTube.
Install VLC Media Player and open it.
Hit Media (menu)... and Open Network Stream.
Paste your video URL there and hit Play.
Hit Tools (menu)... Media Information. You'll find the direct URL to the video there. Use this in your website.
If you want to actually embed from YT or vimeo, check this out:
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>
From the documentation.
And this question.
I'm working with the LeanBack Player for delivering HTML5 playback. The code I have thus far is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>LBP Test Page</title>
<!-- LeanBack Player - CSS Theme -->
<link rel="stylesheet" media="screen" type="text/css" href="css.player/leanbackPlayer.default.css" />
<!-- LeanBack Player - JS Source -->
<script type="text/javascript" src="./js.player/leanbackPlayer.pack.js"></script>
<!-- LeanBack Player Translation(s) (Examples) - JS Source -->
<script type="text/javascript" src="./js.player/leanbackPlayer.en.js"></script><!-- LeanBack Player - English Translation -->
<script type="text/javascript" src="./js.player/leanbackPlayer.de.js"></script><!-- LeanBack Player - German Translation -->
<script type='text/javascript' src='./jwplayer/swfobject.js'></script>
<script type='text/javascript' src='./jwplayer/jwplayer.js'></script>
<script type="text/javascript">
LBP.options = {
// show controls bar below video-viewport; default is "false"
controlsBelow: true,
// (delayed) hiding of LB player controls; default is "true"
hideControls: false,
// show playbackrate element in controls bar to change between "playbackRates"
// only available if supported by browser (if set to "true"); default is "false"
showPlaybackRates: true,
// if playbackrates should be extended; by default following are available
playbackRates: [0.5, 1, 1.3, 1.6, 2],
showSubtitles: true,
}
</script>
</head>
<body>
<div class="leanback-player-video">
<!-- HTML5 Video Element -->
<video width="640" height="360" preload="auto" autoplay controls poster="http://leanbackplayer.com/videos/poster/elephants_dream_640x360.jpg">
<!-- HTML5 Video Source(s) -->
<source src="http://d1odafv1k9dwyc.cloudfront.net/classroom/classroom_01a.mp4" type='video/mp4'; />
<track enabled="true" kind="subtitles" label="English" srclang="en" type="text/x-srt" src="./subtitles/classroom_01a.srt"></track>
}); </video>
 </div>
</body>
</html>
I need to detect when the video is completed. How do I go about doing this?
You can check the html5 video tags doc
and also this blog..
so you can add a even to it to test if the video it is ended:
var myVideo = document.getElementsByTagName('video')[0];
myVideo.onended = function(e) {
//do something
}
http://graysonearle.com/bluemen/
Click on that with a webkit browser. On load it should have a 4x4 grid of videos appear, but only 1-3 videos tend to load on Chrome. Works just fine on Safari, what gives? They are the same video. When I did it with a smaller video it worked fine, I suppose this could have something to do with it. Is there any way to force a load on more than a few videos on a page?
if you suffix each video with a cache buster it seems to work fine. On Chrome it does the right thing and loads the first frame as a poster fairly quickly, but on Safari you need to explicitly select a poster
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
</head>
<body>
<script>
for (var i=0;i<10;i++) {
document.write('<div class="vidBox" id="box'+i+'">');
document.write(' <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
document.write(' <source src="http://graysonearle.com/bluemen/videos/fullvid.mp4?a='+i+'" type="video/mp4">');
document.write(' <source src="http://graysonearle.com/bluemen/videos/red.webm" type="video/ogg">');
document.write(' </video>');
document.write('</div>');
}
</script>
</body>
</html>
If that doesn't work (and it looks like the browser buffer can still sometimes get choked) then what you need to do is load the video sources one by one, triggering the load on the canplaythrough event.
all in all it doesn't seem very robust, good luck
EDIT
Okay, this version is more robust, but needs a little tidying up....
it grabs the video once as a blob via an async ajax call, then passes it as the source to each of the video elements... you'd probably want to load a poster into the videos and display some sort of progress bar until the video has loaded.
I had to do this sample against my test video because I don't have cross-domain rights to your domain so couldn't easily test with your size video... but give it a try
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
<title></title>
</head>
<body>
<script type="text/javascript">
for (var i=0;i<10;i++) {
document.write('<div class="vidBox" id="box'+i+'">');
document.write(' <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
document.write(' <\/video>');
document.write('<\/div>');
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jcath-drg.s3.amazonaws.com/BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
console.log("got it");
var myBlob = this.response;
var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
// myBlob is now the blob that the object URL pointed to.
for (var i=0;i<10;i++) {
display(i,vid)
}
}
};
xhr.send();
function display(i,vid){
var video = document.getElementById("vid"+i);
console.log(video);
video.src = vid;
}
</script>
</body>
</html>