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
}
Related
my project need to show the final audio processed to the user so i am using audio html tag and processed all the audio work in java script side the problem is how to give the processed audio to the html audio tag
i did it with button tag but can't do with audio tag (not working)ny help
java script mus.js
const mus = {
A : new Audio("pA.mp3"),
B : new Audio("pB.mp3")
}
let txt="";
function emc()
{
txt = document.getElementById("d1").value.toUpperCase()
console.log(txt);
for (const char of txt)
{
mus[char].playbackRate = 2;
char in mus ? mus[char].play() : char;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>audio</title>
</head>
<body>
<script src = "muss.js"></script>
<br>
<textarea id="d1" rows="13" cols="60"></textarea><br><br><br>
<input type="button" value="playing" onClick="emc()"></input>
<audio controls autoplay muted >
<source src="x" type="audio/ogg">
</audio>
<br>
<br><br><br>
<button id="d0" onclick="playMusic()">work</button>
<br>
<br><br><br>
<!--<div id="x"></div>-->
<button id="x" onclick="emc()">Set Song</button>
<audio controls onplay="playMusic()" autoplay muted> /// here this is not showing the playing music instead only empty one
<source src='${audio}' type="audio/mpeg"></source>
</audio>
</body>
</html>
i tried every thing i know but not working help me
any suggestions or ideas ??
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();
Ive been trying everything I know but I cant seem to just add in the video, in the center of the page, to loop non-stop. Am I using a wrong code or...?
I am currently using the latest Firefox browser
Code: http://pastebin.com/NJywJwaW
Try now
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var vid = document.getElementById("myVideo");
vid.autoplay = true;
vid.loop = true;
vid.controls = false;
vid.load();
</script>
</head>
<body bgcolor="#000000">
<center>
<video id="myVideo" autoplay>
<source src="sk1logo1.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
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
I'm trying the HTML5 video tag as in this example, but not everything is working.
I want to use the ontimeupdate event to print current video time:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video src="test.ogv" width='640' height='480' controls='controls'>
</video>
<div id=time>time</div>
<script>
var video = document.getElementsByTagName('video')[0];
var time = document.getElementById('time');
video.ontimeupdate = function(e) {
time.innerHTML="Current time: " + video.currentTime;
}
</script>
</body>
</html>
This works in Opera and Firefox, but not in Google Chrome.
So, why does this code not working in Chrome?
This works for me, maybe chrome's bug/fault your code doesn't work
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video src="test.mp4" width='640' height='480' controls='controls' ontimeupdate="timeupdate();">
</video>
<div id=time>time</div>
<script>
var video = document.getElementsByTagName('video')[0];
var time = document.getElementById('time');
function timeupdate() {
time.innerHTML = 'Current time: ' + video.currentTime;
}
</script>
</body>
</html>