Hi guys i am embedding a facebook video and just wanna ask whats wrong with my code because FB.Event.subscribe function wont trigger but the video loads.
<html>
<title>My Website</title>
<head>
<script>
window.fbAsyncInit = function() {
console.log("Aw");
FB.init({
appId : '628101554415776',
xfbml : true,
version : 'v3.2'
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
console.log("Wew");
if (msg.type === 'video') {
my_video_player = msg.instance;
console.log(my_video_player);
}
});
var myEventHandler = my_video_player.subscribe('startedPlaying', function(e) {
console.log("Playing");
});
};
</script>
</head>
<body>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<iframe src="https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/jimcel.longos/videos/3081111611928745/" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</body>
</html>
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>
I am trying to get one of many video files that resides on the server to play on a Web Page using HTML or HTML5. It should run based on whatever filename is passed into the url via an argument. This is the code I have so far, but it does not work.
Example: www.mysite.com?video=myVideo.mp4
So myvideo.mov would reside in the folder on the server. I want the parameter video equal to the video filename.
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="#videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>
Expected results would be:
run this URL sample:
www.mysite.com?video=myvideo.mp4
It should play the video file "myvideo.mp4" that resides in the site folder on the server.
Updated sample - This is more what I want it to do - I took recommendations below, but the following DOES NOT WORK. I am trying to get this to work on all browsers:
Example: www.mysite.com?video=myVideo.mp4&folder=myFolder
<!DOCTYPE html>
<html>
<body>
<div style="width:100%;overflow: hidden;">
<video width="100%" controls>
<source src='about:blank' type="video/mp4">
</video>
</div>
<script>
function loadVideo() {
var player = document.querySelector('video');
var base = 'http://ercx.natfas.com/';
var videoFile = getUrlVars()["video"];
var folder = getUrlVars()["folder"];
if (${folder} = "") {
player.src = '${base}${videoFile}';
} else {
player.src = '${base}${folder}/${videoFile}';
}
player.load();
player.play();
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
loadVideo();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>
Looks like it's achieving what we want to? =)
---
--- Old
You need to set the source correct on the video element, i.e.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
So in your case:
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
Also you're missing a " on the line:
<body onLoad="GetVideo()>
Video File Array
First you need to use MP4, Ogg and/or WebM. Do not use MOV (as mentioned in question). If you got Safari to play a MOV through a <video> tag, it means you have a plugin that facilitates doing so:
Never assume a user has a plugin or assume a user will download and install one if advised to do so.
The majority of the world uses PC not Macs.
Assuming that all videos are in one location (as was stated in question), make an array of their file names:
var files = ['005609.mp4', '005610.mp4', '005612.mp4'];
Next, store your path into a variable:
var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
Declare an index number and reference the <video> tag:
var index = 0;
var player = document.querySelector('video');
Process the array with .map() and interpolate each element in the array with the base (see function loadVideo() in demo).
If you want to play your files one after another, do not use the [loop] attribute (as indicated in HTML of question). Instead register the <video> tag to the ended event and increment the index (see eventListener at the end of demo).
Also a <div> cannot play videos, therefore [controls] and [autoplay] attributes are unnecessary on a <div> (pertaining to the HTML in question).
Demo
This video player will load automatically (as indicated in the HTML of question).
var player = document.querySelector('video');
var base = 'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
var files = ['005609.mp4', '005610.mp4', '005612.mp4'];
var index = 0;
function loadVideo(host, array, index) {
var urls = array.map(function(vid, idx) {
return `${host}${vid}`;
});
player.src = urls[index];
player.load();
player.play();
}
player.addEventListener('ended', function(e) {
if (index >= files.length) {
index = 0;
loadVideo(base, files, index);
} else {
loadVideo(base, files, index);
}
index++;
});
loadVideo(base, files, index);
<!DOCTYPE html>
<html>
<body>
<div style="width:480px;overflow: hidden;">
<video width="100%" controls>
<source src='about:blank' type="video/mp4">
</video>
</div>
</body>
</html>
Answer from Tibbelit as the closest to working. It doesn't work on Chrome but it seems to work on other browsers.
<!DOCTYPE html>
<html>
<body onLoad="GetVideo()">
<div style="width: 100%; height: 768px; controls Autoplay=autoplay; overflow: hidden;">
<video id="video" width="100%" loop autoplay controls>
<source id="videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
function GetVideo() {
x = getUrlVars()["video"];
document.querySelector("#videoSource").setAttribute("src", x);
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
</body>
</html>
<script type="text/javascript">
function random_playlist(){
var myrandom=Math.round(Math.random()*4);
var soundurl='http://dummy.xy/dummy.mp3';
if (myrandom==0){soundurl='http://path_to.mp3';}
else if (myrandom==1){soundurl='http://path_to.mp3';}
else if (myrandom==2){soundurl='http://path_to.mp3';}
else if (myrandom==3){soundurl='http://path_to.mp3';}
else if (myrandom==4){soundurl='http://path_to.mp3';}
console.log(soundurl);
return soundurl;
};
</script>
<audio id="audioplayer_id" controls="controls" loop>
<source id="source_id" src="" type="audio/mp3"/>
Your browser does not support the audio element
</audio>
<script type="text/javascript">
var audioload = random_playlist();
console.log(audioload);
document.getElementById('source_id').src= audioload;
var audioplayer_id = document.getElementById('audioplayer_id')
audioplayer_id.volume = 0.15;
audioplayer_id.load();
audioplayer_id.play();
</script>
Works well for me but can it be optimized or is this OK ?
I just hacked this together from various sources seems like html5 didnt integrate a playlist function in the audio tag, which seems funny to me.
greets
You could shorted the random_playlist function like this:
function random_playlist(){
var PATHS = ['http://path_to.mp3', 'http://path_to.mp3', 'http://path_to.mp3'];
return PATHS[Math.floor(Math.random() * PATHS.length)];
}
or (a better but more complicated version):
var random_playlist = (function(){
var PATHS = ['http://path_to.mp3', 'http://path_to.mp3', 'http://path_to.mp3'];
return function(){
return PATHS[Math.floor(Math.random() * PATHS.length)]
};
}())
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>