I've looked at web sources to find out how to play an array of videos in html5. Using the sources, I have only managed to get the first video to show up (no autoplay) and even when I clicked "play" button manually, the second video does not auto-play/show up after the first one ended. Any idea?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Video.aspx.cs" Inherits="Web.Video.VideoDashboard" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HELLO WORLD</title>
</head>
<body>
<video controls="controls" id="myVideo">
</video>
<script>
var videoSource = new Array();
videoSource[0] = "/MP4Files/Video1.mp4";
videoSource[1] = "/MP4Files/Video2.mp4";
var i = 0; // define i
var videoCount = videoSource.length;
function videoPlay(videoNum) {
document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(i); // play the video
function myHandler() {
i++;
if (i == (videoCount - 1)) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
</script>
</body>
</html>
Related
I'm trying to set dimensions for canvas, based on my video dimensions. For some reason my video height and width is always 0. I assume it is something to do with my class which is not updating the details.
Webcam.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get User Media Code Along!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="photobooth">
<canvas class="photo"></canvas>
<video class="player"></video>
</div>
<script src="./webcam.js"></script>
</body>
</html>
webcam.js
class Webcam {
constructor(){
this.video = document.querySelector('.player');
this.canvas = document.querySelector('.photo');
this.canvasContext = this.canvas.getContext("2d");
this.strip = document.querySelector('.strip');
this.snap = document.querySelector('.snap');
}
captureVideo(){
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(browserVideoStream => {
console.log(browserVideoStream);
this.video.src = window.URL.createObjectURL(browserVideoStream);
this.video.play();
}).then(video => {
this.videoToCanvas();
})
.catch(err => alert(err));
}
videoToCanvas(){
let videoWidth = this.video.videoWidth;
let videoheight = this.video.videoHeight;
console.log(`${videoWidth} - ${videoheight}`); // THIS IS ALWAYS 0,0
}
}
video = new Webcam();
video.captureVideo();
video.videoToCanvas();
.play() can take time, so you'll need to change
this.video.play();
to
return this.video.play();
so that the following .then handler waits for the video starts playing before calling .videoToCanvas().
I am new in Canvas of HTML5. What I want to do. I want a microphone audio visualizer just like windows Sound visualizer of microphone (control panel => hardware and sound => Sound => recording)
Can anybody tell me Please how I will create it in canvas and adjust with web audio API ?
An other problem is My visualizer is more sensitive. How i will adjust it. I want blank spectrum if no sound is there.
I am sharing a picture what I exactly want.
Img url: http://phillihp.com/wp-content/uploads/2011/12/winamp-step-pre-step-1.png
Please help me out to solve this problem.
Untitled Document
<body>
<canvas id="test"></canvas>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true}, function(stream){
audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createScriptProcessor(1024, 1, 1);
analyser.smoothingTimeConstant = 0.0;
analyser.fftSize = 512;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
//canvasContext = $("#canvas")[0].getContext("2d");
canvasContext = document.getElementById("test");
canvasContext= canvasContext.getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values / length;
canvasContext.clearRect(0, 0, 150, 300);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,140);
}
}, function(e){ console.log(e); }
);
</script>
</body>
Check out this code sample: https://github.com/cwilso/volume-meter/.
Based on cwilso answer. Fixed the problem with mobile devices. "StartNow" is the main JS function in main.js (originallt called by window.onload):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Volume Meter</title>
<script src="volume-meter.js"></script>
<script src="main.js"></script>
</head>
<body onload="javascript:StartNow()"> >
<p>uses audioContext.createScriptProcessor(buffer size) Web Audio API. Use https://webaudio.github.io/web-audio-api/#audioworklet</p>
<canvas id="meter" width="1100" height="60"></canvas>
<p>On Android press button to start (fixes new security requirement added in the new Android OS version)</p>
<button onclick="javascript:StartNow()">Start</button>
</body>
</html>
On Android you need to press the button to start.
This is necessary because of a NEW security requirement added in the new Android OS.
I'm trying to embed a video from YouTube. When I preview the page, I will get a black screen with the words "This video contains content from UMG. Playback restricted on certain sites. Watch on YouTube(link)." The video did have copy written material, but has been removed and the video was uploaded again to YouTube. I still get the same error. Someone else has been able to upload the video on a live site. I'm not running a testing server-not sure if this is part of the problem?
<'iframe width="640" height="360" src="http://www.youtube.com/embed/3uIkI49uk8I?rel=0"
frameborder="0" allowfullscreen></iframe>
The example code below has a video that explains how to remove the copyright restriction
when I put in your youtube it came up with the UMG so try the steps in the video and the code snippet should work too.
<!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>play youtube</title>
</head>
<'iframe width="640" height="360" src="http://www.youtube.com/embed/lUq0lYmJ89c?rel=0" frameborder="0" allowfullscreen>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.`enter code here`
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'lUq0lYmJ89c',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
I have created a streaming webcam with html5. At the moment I can take a picture through my web cam, but I would like to know if it is possible to choose media stream device from the list, e.g. I have two web cams I want to choose the webcam to activate. How can I do that with html5 getUserMedia() call?
Thanks!
You can get the list of web camera
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Video Camera List</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<style type="text/css" media="screen">
video {
border:1px solid gray;
}
</style>
</head>
<body>
<script>
if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>';
var videoSources = [];
MediaStreamTrack.getSources(function(media_sources) {
console.log(media_sources);
// alert('media_sources : '+media_sources);
media_sources.forEach(function(media_source){
if (media_source.kind === 'video') {
videoSources.push(media_source);
}
});
getMediaSource(videoSources);
});
var get_and_show_media = function(id) {
var constraints = {};
constraints.video = {
optional: [{ sourceId: id}]
};
navigator.webkitGetUserMedia(constraints, function(stream) {
console.log('webkitGetUserMedia');
console.log(constraints);
console.log(stream);
var mediaElement = document.createElement('video');
mediaElement.src = window.URL.createObjectURL(stream);
document.body.appendChild(mediaElement);
mediaElement.controls = true;
mediaElement.play();
}, function (e)
{
// alert('Hii');
document.body.appendChild(document.createElement('hr'));
var strong = document.createElement('strong');
strong.innerHTML = JSON.stringify(e);
alert('strong.innerHTML : '+strong.innerHTML);
document.body.appendChild(strong);
});
};
var getMediaSource = function(media) {
console.log(media);
media.forEach(function(media_source) {
if (!media_source) return;
if (media_source.kind === 'video')
{
// add buttons for each media item
var button = $('<input/>', {id: media_source.id, value:media_source.id, type:'submit'});
$("body").append(button);
// show video on click
$(document).on("click", "#"+media_source.id, function(e){
console.log(e);
console.log(media_source.id);
get_and_show_media(media_source.id);
});
}
});
}
</script>
</body>
</html>
In the latest Chrome Canary (30.0.1587.2) it looks like you can enable device enumeration in chrome://flags (looks like it might already be enabled) and use the MediaStreamTrack.getSources API to select the camera.
See this WebRTC bug and mailing list post for more details.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="jwplayer/jwplayer.js"></script>
</head>
<body>
<div id="flashContent">
<p>Alternative content</p>
</div>
<script type="text/javascript">
var flashvars = { file:'/video.flv'};
var params = { allowfullscreen:'true', allowscriptaccess:'always' };
var attributes = { id:'player1', name:'player1' };
swfobject.embedSWF('player1.swf','flashContent','480','270','9.0.115','false', flashvars, params, attributes, flashLoaded);
function flashLoaded(e) {
// e.ref is a reference to the Flash object. We'll pass it to jwplayer() so the API knows where the player is.
// Add event listeners
jwplayer(e.ref).onReady(function() { alert('Player is ready'); e.ref.play();e.ref.seek(10); });
jwplayer(e.ref).onPlay(function() { e.ref.play();});
jwplayer(e.ref).onStop(function() { e.ref.stop();});
jwplayer(e.ref).onVolume(function() { e.ref.seek(100);});
// Interact with the player
}
</script>
</body>
</html>
'video.flv' is in the same directory as the html file
try to put full path
for example:
var flashvars = { file:'http://yourwebsite.com/video.flv'};