I'm working on a modal window which allows user to either 1.)paste a video url or 2.)select a file from local drive then get a preview using html5's<video>tag.
Option 2.) Selecting a video file locally work perfectly. However, when I paste a youtube video url on input text field, the video player shows a loading indicator then stops. You can't play the video and doesn't seem to load successfully.
I checked Google Chrome's inspector and get this message
I suspect the problem is in this line.
$('#modalInput_pasteURL').on('input',function(e){
var videoUrl = $('#modalInput_pasteURL').val().trim();
$(".video").attr("src", videoUrl);
});
I read while doing research that <iframe> must be used to contain or play a youtube video from a url. In this case, I'd like to use just <video> tag so that I only have one video container.
$('#modalInput_pasteURL').on('input',function(e){
var videoUrl = $('#modalInput_pasteURL').val().trim();
$(".video").attr("src", videoUrl);
});
$("#modalBtn_choose_video_file").on('change',function(event){
var fileInput = document.getElementById('modalBtn_choose_video_file');
var fileUrl = window.URL.createObjectURL(fileInput.files[0]);
$(".video").attr("src", fileUrl);
});
Thank you.
解决方案
YouTube videos can be embedded into a webpage by either using a <div> or an <iframe> tag and loading YouTube IFrame Player API. The following Demo is a modification of the OP code. It can play either a standard video or a YT video. The Stack Snippet cannot play YouTube videos on SO site, so to properly test it, you either copy and paste the entire code elsewhere or go to this Plunker.
Note: There is some code commented out that is included should you want to load the YT API in order to control the YT player programmatically.
The YouTube video will not play on SO due to sandbox, go to Plunker for a fully functional Demo
/* If you want programattic control over the YT Player uncomment
|| the following block and the block after the next block
*/
/*/ Load YouTube IFrame Player API
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
*/
// Reference video tag
var vid = document.getElementById('vid');
/*/ Declare YT Player
var ytv;
// Define YT Player
function onYouTubeIframeAPIReady() {
ytv = new YT.Player('ytv');
}
*/
// Seup switch behavior
$('.switchBtn').on('click', function(e) {
$('.switchBtn').removeClass('act');
$(e.target).addClass('act');
});
// Delegate input event to #pasteURL
$('#pasteURL').on('input', function(e) {
// Get the url string
var videoUrl = $('#pasteURL').val().trim();
// if the "Standard Video" switch is active...
if ($('.v').is('.act')) {
// ...enable controls on vid...
vid.controls = true;
// ...set src to url string...
vid.src = videoUrl;
// ...reset vid so it cues new url
vid.load();
// ...otherwise...
} else {
// ...pause vid...
vid.pause();
// ...reset vid...
vid.currentTime = 0;
// ...remove vid controls...
vid.controls = false;
// ...set ytv src to new url
$('#ytv').attr('src', videoUrl);
}
});
$("#file").on('change', function(event) {
var fileInput = $('#file')[0];
var fileUrl = window.URL.createObjectURL(fileInput.files[0]);
$("#vid").attr("src", fileUrl).prop("controls", true);
});