I have a feature where I can upload videos to the system. It works fine but I am having trouble playing the video, I can't find a library or a player to use. Anyone can recommend an angular js video player ? or a directive we can use. Thank you. iframe does not work because we know it uses the built-in player from the website we embed. There is no issue regarding uploading the videos, the issue is on what video player library we can use.
The code below will play a video using the standard browser HTML5 video player - this is old, original Angular 1, as I think you ask.
// function called when user clicks the play button for a particular video
function playVideo(video) {
console.log("playVideo button clicked");
// set the video player window to the player window instead of blank
$scope.playerWindowURL = './templates/video_player_window.html';
$scope.collabServerPlayVideoURL = colabConfig.colabServerBaseURL + "/uploaded_videos/" + video.file_name;
};
<div>
<!-- HTML5 video tag to play video -->
<video width="320" height="180" autoplay controls="true" src="{{collabServerPlayVideoURL}}"></video>
</div>
Full repository is here in case you want to see it - it not maintained but worked last time I checked a couple of years ago: https://github.com/mickod/ColabServer
Related
Is there a way to play music on a website using only a URL to a Youtube video/playlist? (Similar to how you can play and queue music using a discord music bot.) I am hoping to allow the user to input a Youtube URL and have my audio player play the audio of the video.
I have tried looking into libraries and such that would help with this, but there is very little on the subject. I've also looked into discord.js, and although I don't understand it fully, I am unsure if it will be compatible for making something not associated with discord.
EDIT: I am using the audio tag in order to play music and 2 libraries that I am using 2 other web APIs that depend on the audio tag.
Full answer :)
Note that it plays the particular video, no way you can do that with audio (as much as i know and as much as i can)
<input id="videourl"><button onClick="do()">Load</button>
<video id="video"></video>
<script>
function do(){
var x = document.getElementById("videourl").value;
document.getElementById("video").src = x;
}
</script>
Well you can request post to a yt to audio website and etc. etc. but it will be hard. Why not YOU figure out yourself to hide that video so only audio is audible? Use css to turn down the video opacity.
If video doesnt work, use iframe.
Currently, I am facing issue with Limelight player. It is playing flash videos with Limelight player and player ID is the argument which is passed for the flash videos.
Flash player videos are causing issue and we need to change the approach to play HTML5 videos instead of flash player.But I can't see or find any relevant code in which video stream from limelight player can be feed into the HTML5 player.
Any suggestions or code snippets for making Limelight videos being played with the HTML5 player will be very helpful.
Regards
I am currently working on it and its bit of complex but here is what limelight came with :
<div id="limelight_player_659410"></div><script src="//video.limelight.com/player/limelightjs-player.js"></script>
<script>LimelightPlayerUtil.embed({"height":321,"playerId":"limelight_player_659410","width":480,"mediaId":"c3713feac461425e8889d55689358352","playerForm":"Player"});</script>
First approach is to create limelight callback function:
function limelightPlayerCallback(playerId, eventName, data) {
console.dir(data);
colsole.log(data.thumbnailUrl);
console.log(data.title);
console.log(data.description);
}
So when you call :
LimelightPlayerUtil.embed({"width":"480px","height":"300px", "playerId":"HEREisYOURcontainerID", "mediaId":"HEREisYOURmediaId", "playerForm":"Player"});
your limelightPlayerCallback will get "data".
Now you can see in console all data.proprties and use which one you want to manipulate HTML5 Video tag and display data.
Second approach: Not sure if this link is valid by limelight but I was able to get it from calls I was making :
https://production-ps.lvp.llnw.net/r/PlaylistService/media/d7d5b0ec19e1441781c3df4209fe5cb6/getMobilePlaylistByMediaId
This link will return JSON with all properties. Please note that "d7d5b0ec19e1441781c3df4209fe5cb6" is video ID so replace and use any of your video IDs. Once you get JSON you will get URL and you can inject HTML5 video tag :)
I have been trying to get WebAudio working in Safari on iOS8 (i have succesfully got it working in Windows and on Android devices).
It is my understanding that you cannot automatically play webaudio through Safari on iOS, but instead you must trigger the first WebAudio call through a user action (e.g. a button press). Then once this first user-driven action is done, WebAudio will work.........Apparantly.
So i have a button set up (using JQM) like this:
Enable Audio<hr />
"PlayDing" is a function which looks like this:
function PlayDing(DingType) {
var sound = new Audio('../../UI/Audio/' + DingType + '.mp3').play();
}
The idea is that by clicking the "Enable Audio" button, this triggers a user interaction to play an mp3 file (which is just 1 second of silence) and then subsequent audio events will just work.
Any ideas why this is not working on iOS8 / Safari?
EDIT:
If i change my JQM button to play a proper ding sound, it works fine and my iPad plays the ding.
EDIT 2:
This is nothing to do with playing audio files from my iPad's music library. This is about playing files / resources that are part of the website.
"It is my understanding that you cannot automatically play webaudio through Safari on iOS, but instead you must trigger the first WebAudio call through a user action (e.g. a button press). Then once this first user-driven action is done, WebAudio will work.........Apparantly."
You are completely right about the handling of the playing. To avoid playing unwanted sounds or unwanted download of sounds onto users devices possibly using up monthly data - a soundplay has to be called in the same stack as the user's touch/click.
There are multiple of things you have to deal with to make sure all your users can reliably play the sound. One thing is it has to be downloaded before you play it. To achieve this we use a technique called preloading.
You also have to take into account that not all users support the same audio format.
An example of your HTML and Javascript could be as follows:
Javascript:
function PlayDing(DingType) {
//Get a reference to the audio element
var sound = document.getElementById(DingType);
//Play it
sound.play();
}
HTML:
<body>
<!--Declare the sounds in as many formats as possible and let the user's browser handling what sound to play & caching -->
<audio id="Silent" preload="auto">
<source src="'../../UI/Audio/silent.ogg" type="audio/ogg">
<source src="'../../UI/Audio/silent.wav" type="audio/wav">
<source src="'../../UI/Audio/silent.aac" type="audio/mpeg">
</audio>
Enable Audio
<hr />
</body>
What is the best way to create a video player similar to the youtube video player in that after the video has played, it shows a collection of further videos to watch?
The videos are not hosted on youtube.
Generating the video suggestions is not a problem. The problem is displaying them in the player after the video finished playing in such a way that if the user clicks one of the suggestions, the selected video page is opened and played.
Can I do this in html5 or jquery or flash or something else?
JWPlayer is a good HTML5 video player with a Flash fallback. It also has a decent API which supports related videos: http://www.longtailvideo.com/support/addons/related-videos/22352/related-videos-reference-guide/.
There are a few license options too: http://www.longtailvideo.com/jw-player/pricing/
Hope that helps.
Can be done in Flash. You could use the FLVPlayback Component to play the original video. Then use the Listener Class to listen for COMPLETE. You could then place thumbnails for each of the related videos on top of the FLVPlayback Component - these would then load the new video into the component and the process would continue.
Check this tutorial out for using the component and also the Listener Class for the component.
I'd like to click on an embedded youtube video using javascript (so the video plays automatically). I successfully simulated a click on a <div> like this:
function f(){
alert("hello");
}
<div id="someid" onmouseup="f();">
my text
</d>
document.getElementById("someid").onmouseup();
How can the above code be adapted to work with an embedded youtube video?
Just add &autoplay=1 to the link of the video in the <embed> tag.
If he does what you suggest the views on the embedded video won't count. I'm pretty sure he is asking his question because he is trying to find a way to get the video to autoplay and have youtube count the views at the same time.