Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2016
    Location
    Sofia / Bulgaria
    Posts
    55
    Thanks
    2
    Thanked 0 Times in 0 Posts

    player video format Javascript

    Hello I want to ask how can I add video formats other than Mp4, to visualize the player...
    player is currently returning the following error: The media could not be loaded, either because the server or network failed or because the format is not supported.

    Code:
    $(document).ready(function(){
    
    	// Does the browser actually support the video element?
    	var supportsVideo = !!document.createElement('video').canPlayType;
    	var myRegex = (mkv|mp4)$/;
    
    	if (supportsVideo) {
    		// Obtain handles to main elements
    		var videoContainer = document.getElementById('videoContainer');
    		var video = document.getElementById('video');
    		var videoControls = document.getElementById('video-controls');
    		
    
    		// Hide the default controls
    		video.controls = false;
    
    		// Display the user defined video controls
    		videoControls.setAttribute('data-state', 'visible');
    
    		// Obtain handles to buttons and other elements
    		var playpause = document.getElementById('playpause');
    		var stop = document.getElementById('stop');
    		var mute = document.getElementById('mute');
    		var volinc = document.getElementById('volinc');
    		var voldec = document.getElementById('voldec');
    		var progress = document.getElementById('progress');
    		var progressBar = document.getElementById('progress-bar');
    		var fullscreen = document.getElementById('fs');
    		var subtitles = document.getElementById('subtitles');
    
    		// If the browser doesn't support the progress element, set its state for some different styling
    		var supportsProgress = (document.createElement('progress').max !== undefined);
    		if (!supportsProgress) progress.setAttribute('data-state', 'fake');
    
    		// Check if the browser supports the Fullscreen API
    		var fullScreenEnabled = !!(document.fullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled || document.webkitSupportsFullscreen || document.webkitFullscreenEnabled || document.createElement('video').webkitRequestFullScreen);
    		// If the browser doesn't support the Fulscreen API then hide the fullscreen button
    		if (!fullScreenEnabled) {
    			fullscreen.style.display = 'none';
    		}
    
    		// Check the volume
    		var checkVolume = function(dir) {
    			if (dir) {
    				var currentVolume = Math.floor(video.volume * 10) / 10;
    				if (dir === '+') {
    					if (currentVolume < 1) video.volume += 0.1;
    				}
    				else if (dir === '-') {
    					if (currentVolume > 0) video.volume -= 0.1;
    				}
    				// If the volume has been turned off, also set it as muted
    				// Note: can only do this with the custom control set as when the 'volumechange' event is raised, there is no way to know if it was via a volume or a mute change
    				if (currentVolume <= 0) video.muted = true;
    				else video.muted = false;
    			}
    			changeButtonState('mute');
    		}
    
    		// Change the volume
    		var alterVolume = function(dir) {
    			checkVolume(dir);
    		}
    
    		// Set the video container's fullscreen state
    		var setFullscreenData = function(state) {
    			videoContainer.setAttribute('data-fullscreen', !!state);
    			// Set the fullscreen button's 'data-state' which allows the correct button image to be set via CSS
    			fullscreen.setAttribute('data-state', !!state ? 'cancel-fullscreen' : 'go-fullscreen');
    		}
    
    		// Checks if the document is currently in fullscreen mode
    		var isFullScreen = function() {
    			return !!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
    		}
    
    		// Fullscreen
    		var handleFullscreen = function() {
    			// If fullscreen mode is active...	
    			if (isFullScreen()) {
    					// ...exit fullscreen mode
    					// (Note: this can only be called on document)
    					if (document.exitFullscreen) document.exitFullscreen();
    					else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
    					else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
    					else if (document.msExitFullscreen) document.msExitFullscreen();
    					setFullscreenData(false);
    				}
    				else {
    					// ...otherwise enter fullscreen mode
    					// (Note: can be called on document, but here the specific element is used as it will also ensure that the element's children, e.g. the custom controls, go fullscreen also)
    					if (videoContainer.requestFullscreen) videoContainer.requestFullscreen();
    					else if (videoContainer.mozRequestFullScreen) videoContainer.mozRequestFullScreen();
    					else if (videoContainer.webkitRequestFullScreen) {
    						// Safari 5.1 only allows proper fullscreen on the video element. This also works fine on other WebKit browsers as the following CSS (set in styles.css) hides the default controls that appear again, and 
    						// ensures that our custom controls are visible:
    						// figure[data-fullscreen=true] video::-webkit-media-controls { display:none !important; }
    						// figure[data-fullscreen=true] .controls { z-index:2147483647; }
    						video.webkitRequestFullScreen();
    					}
    					else if (videoContainer.msRequestFullscreen) videoContainer.msRequestFullscreen();
    					setFullscreenData(true);
    				}
    			}
    
    		// Only add the events if addEventListener is supported (IE8 and less don't support it, but that will use Flash anyway)
    		if (document.addEventListener) {
    			// Wait for the video's meta data to be loaded, then set the progress bar's max value to the duration of the video
    			video.addEventListener('loadedmetadata', function() {
    				progress.setAttribute('max', video.duration);
    			});
    
    			// Changes the button state of certain button's so the correct visuals can be displayed with CSS
    			var changeButtonState = function(type) {
    				// Play/Pause button
    				if (type == 'playpause') {
    					if (video.paused || video.ended) {
    						playpause.setAttribute('data-state', 'play');
    					}
    					else {
    						playpause.setAttribute('data-state', 'pause');
    					}
    				}
    				// Mute button
    				else if (type == 'mute') {
    					mute.setAttribute('data-state', video.muted ? 'unmute' : 'mute');
    				}
    			}
    
    			// Add event listeners for video specific events
    			video.addEventListener('play', function() {
    				changeButtonState('playpause');
    			}, false);
    			video.addEventListener('pause', function() {
    				changeButtonState('playpause');
    			}, false);
    			video.addEventListener('volumechange', function() {
    				checkVolume();
    			}, false);
    
    			// Add events for all buttons			
    			playpause.addEventListener('click', function(e) {
    				if (video.paused || video.ended) video.play();
    				else video.pause();
    			});	
    
    			// Turn off all subtitles
    			for (var i = 0; i < video.textTracks.length; i++) {
    				video.textTracks[i].mode = 'hidden';
    			}
    
    			// Creates and returns a menu item for the subtitles language menu
    			var subtitleMenuButtons = [];
    			var createMenuItem = function(id, lang, label) {
    				var listItem = document.createElement('li');
    				var button = listItem.appendChild(document.createElement('button'));
    				button.setAttribute('id', id);
    				button.className = 'subtitles-button';
    				if (lang.length > 0) button.setAttribute('lang', lang);
    				button.value = label;
    				button.setAttribute('data-state', 'inactive');
    				button.appendChild(document.createTextNode(label));
    				button.addEventListener('click', function(e) {
    					// Set all buttons to inactive
    					subtitleMenuButtons.map(function(v, i, a) {
    						subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
    					});
    					// Find the language to activate
    					var lang = this.getAttribute('lang');
    					for (var i = 0; i < video.textTracks.length; i++) {
    						// For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
    						if (video.textTracks[i].language == lang) {
    							video.textTracks[i].mode = 'showing';
    							this.setAttribute('data-state', 'active');
    						}
    						else {
    							video.textTracks[i].mode = 'hidden';
    						}
    					}
    					subtitlesMenu.style.display = 'none';
    				});
    				subtitleMenuButtons.push(button);
    				return listItem;
    			}
    			// Go through each one and build a small clickable list, and when each item is clicked on, set its mode to be "showing" and the others to be "hidden"
    			var subtitlesMenu;
    			if (video.textTracks) {
    				var df = document.createDocumentFragment();
    				var subtitlesMenu = df.appendChild(document.createElement('ul'));
    				subtitlesMenu.className = 'subtitles-menu';
    				subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
    				for (var i = 0; i < video.textTracks.length; i++) {
    					subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
    				}
    				videoContainer.appendChild(subtitlesMenu);
    			}
    			subtitles.addEventListener('click', function(e) {
    				if (subtitlesMenu) {
    					subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
    				}
    			});
    
    			// The Media API has no 'stop()' function, so pause the video and reset its time and the progress bar
    			stop.addEventListener('click', function(e) {
    				video.pause();
    				video.currentTime = 0;
    				progress.value = 0;
    				// Update the play/pause button's 'data-state' which allows the correct button image to be set via CSS
    				changeButtonState('playpause');
    			});
    			mute.addEventListener('click', function(e) {
    				video.muted = !video.muted;
    				changeButtonState('mute');
    			});
    			volinc.addEventListener('click', function(e) {
    				alterVolume('+');
    			});
    			voldec.addEventListener('click', function(e) {
    				alterVolume('-');
    			});
    			fs.addEventListener('click', function(e) {
    				handleFullscreen();
    			});
    
    			// As the video is playing, update the progress bar
    			video.addEventListener('timeupdate', function() {
    				// For mobile browsers, ensure that the progress element's max attribute is set
    				if (!progress.getAttribute('max')) progress.setAttribute('max', video.duration);
    				progress.value = video.currentTime;
    				progressBar.style.width = Math.floor((video.currentTime / video.duration) * 100) + '%';
    			});
    
    			// React to the user clicking within the progress bar
    			progress.addEventListener('click', function(e) {
    				// Also need to take the parents into account here as .controls and figure now have position:relative
    				var pos = (e.pageX  - (this.offsetLeft + this.offsetParent.offsetLeft + this.offsetParent.offsetParent.offsetLeft)) / this.offsetWidth;
    				video.currentTime = pos * video.duration;
    			});
    
    			// Listen for fullscreen change events (from other controls, e.g. right clicking on the video itself)
    			document.addEventListener('fullscreenchange', function(e) {
    				setFullscreenData(!!(document.fullScreen || document.fullscreenElement));
    			});
    			document.addEventListener('webkitfullscreenchange', function() {
    				setFullscreenData(!!document.webkitIsFullScreen);
    			});
    			document.addEventListener('mozfullscreenchange', function() {
    				setFullscreenData(!!document.mozFullScreen);
    			});
    			document.addEventListener('msfullscreenchange', function() {
    				setFullscreenData(!!document.msFullscreenElement);
    			});
    		}
    	 }
    	 
    	 var VP = VP || {};
    
    var barSize = new Number(500);
    var scrubberContainer = $('#scrubberContainer')[0];
    var scrubberBar = $('#scrubberBar')[0];
    var playPauseBtn = $('#playPauseBtn')[0];
    var videoPlayer = $('#videoPlayer')[0];
    var updatePlayer;
    var updateTimer;
    
    VP.init = function(){
        playPauseBtn.addEventListener('click', VP.togglePlayPause, false);
        scrubberContainer.addEventListener('click', VP.scrubberClicked, false);
        videoPlayer.addEventListener('timeupdate', VP.updateTimer);
    }
    
    VP.togglePlayPause = function(){
        if(!videoPlayer.paused && !videoPlayer.ended){
            videoPlayer.pause();
            $('#playPauseBtn').html('Play');
            window.clearInterval(updatePlayer);
            window.clearInterval(updateTimer);
        } else {
            videoPlayer.play();
            $('#playPauseBtn').html('Pause');
            updatePlayer = setInterval(function()
            {
                VP.updateScrubber();
            }, 100);
        }
    }
    
    VP.updateScrubber = function(){
        if(!videoPlayer.ended){
            var size = parseInt(videoPlayer.currentTime * barSize/videoPlayer.duration);
            $('#scrubberBar').css('width', size + 'px');
        }
        else{
            $('#scrubberBar').css('width', '0px');
            $('#playPauseBtn').css('Play');
            window.clearInterval(updatePlayer);
        }
    };
    
    VP.scrubberClicked = function(e){
        if(!videoPlayer.paused && !videoPlayer.ended){
            var mouseX = e.pageX - scrubberContainer.offsetLeft;
            var newTime = mouseX * videoPlayer.duration/barSize;
            videoPlayer.currentTime = newTime;
            $('#scrubberBar').css('width', mouseX + 'px');
        }
    };
    
    VP.updateTimer = function(){
        var eTime;
        var tTime;
    
        //calculate elapsed time
        var eSeconds = Math.round(videoPlayer.currentTime);
        var eMinutes = Math.floor(eSeconds/60);
        eMinutes = (eMinutes >= 10) ? eMinutes : "0" + eMinutes;
        eSeconds = Math.floor(eSeconds % 60);
        eSeconds = (eSeconds >= 10) ? eSeconds : "0" + eSeconds;
    
        //calculate total time
        var tSeconds = Math.round(videoPlayer.duration);
        var tMinutes = Math.floor(tSeconds/60);
        tMinutes = (tMinutes >= 10) ? tMinutes : "0" + tMinutes;
        tSeconds = Math.floor(tSeconds % 60);
        tSeconds = (tSeconds >= 10) ? tSeconds : "0" + tSeconds;
    
        //assign these values to our variables
        eTime = '' + eMinutes + ':' + eSeconds;
        tTime = '' + tMinutes + ':' + tSeconds;
    
        //display in timer
        $('#timer').html('' + eTime + ' / ' + tTime);
    
    };
    
    
    })
    i want to load the following video formats: .mkv / .avi / .flv / .mov, .qt / .amv / .nsv


    10x
    Last edited by vask0; 06-14-2018 at 02:31 PM.

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,855
    Thanks
    3
    Thanked 411 Times in 400 Posts
    The file formats you listed are flat out NOT supported by HTML 5's VIDEO tag, which seems to be what the scripting you have is to manipulate.

    In THEORY you might be able to find a flash based player to support SOME of those formats, but

    1) control of the player would have to be written in the flash player, not in JS on your page; since it would use the <object> tag, not <video>

    2) Most people don't have flash installed, or have it blocked, or simply don't trust it.

    What you probably should be doing is using a transcoder to convert those files to a SUPPORTED file format, probably more than one of which since not all browsers support all code/container combinations.

    MKV is unlikely to ever see support for being considered 'scummy', the province of pirates. AVI is windows specific with zero support in <video> and only supported in <object> in Internet Explorer. (I'm not even sure Edge supports AVI anymore!), FLV is flash video, so that would be flash... mov and qt are Quicktime specific, windows users will tell you to go f*** yourself before installing quicktime and there is no QT for linux, and I've never even HEARD of those other two.

    I'd suggest converting your files to webM, MP4, and OGV -- ALL THREE -- and implementing them properly in the markup via the <source> tag so browsers can pick and choose from the format they support best.

    These are your choices of format for the method you are using. Either convert to it, or... well, don't use <video>

    https://developer.mozilla.org/en-US/..._compatibility
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •