mediaelement / mediaelement-plugins Goto Github PK

my code javascript:
`var player= new MediaElementPlayer('reproductor', {
stretching: 'stretching',
alwaysShowControls: true,
defaultSpeed: 0.5,
tracksText:'Acordes y Notas de la cancion',
startLanguage:'en',
features: ['playpause', 'current', 'progress', 'duration', 'speed', 'skipback', 'jumpforward', 'tracks',
'markers', 'volume', 'chromecast', 'ads', 'vast', 'contextmenu'],
media.addEventListener('timeupdate', function () {
procesarAcorde(media.currentTime);
});

			media.addEventListener('error', function (e) {
				renderer.querySelector('.error').innerHTML = '<strong>Error</strong>: ' + e.message;
			});
		}
	});`

also add the plugin:
<!--<script src="https://cdn.jsdelivr.net/mediaelement/latest/mediaelement-and-player.min.js"></script>--> <script src="<?=base_url()?>mediajs/plugins/speed/speed.min.js"></script> <!-- Translation file for plugin (includes ALL languages available on player)--> <script src="<?=base_url()?>mediajs/plugins/speed/speed-i18n.js"></script>

in the console log not show mistakes , please help

From @isantolin on January 20, 2017 18:38

@Ron666 Like Youtube, can add a feature to split between video qualities, or "Auto" for autosplit by bandwidth analisys?

Copied from original issue: mediaelement/mediaelement#2008

In the wiki, just like below, where can i find the details of configuration?
$('video').mediaelementplayer({ defaultSpeed: 0.75, // other configuration elements });

Hello and good day. I am not sure if this is a limitation with Vimeo. When I use the fade in controls, it seems to bounce up and down as the audio fades in. You may see and hear it here. https://mmt.staging.wpengine.com/

Here are the settings:
fadeInAudioStart:0,
fadeInAudioInterval:20,
fadePercent: 0.04,

Please let me know what you think. Thank you for all your genius hard work! :)

Feature request: Allow a click on the Speaker icon to Mute and Unmute audio.

Safari replaces all elements inside <video> with 'Shadow Content (User Agent)'.

buildsourcechooser: function buildsourcechooser(player, controls, layers, media) {
	var t = this,
		sourceTitle = mejs.Utils.isString(t.options.sourcechooserText) ? t.options.sourcechooserText : mejs.i18n.t('mejs.source-chooser'),
		sources = [],
		children = t.node.childNodes;

Children is empty here therefore sources too.

From @SeventhCycle on October 7, 2016 0:48

Hello,

There have been 4-5 people in the past week who have messaged me lately asking about VR support in mediaelements.js.

Two of the web players that have been pointed to as examples are:
https://krpano.com/
https://developer.jwplayer.com/jw-player/demos/innovation/360-video/

I'm opening this ticket to see:

1. If there's any plans for this in the near or mid future.
2. If there isn't, if this is a project that can be potentially sponsored and added to the software.

I haven't seen any open source player tackle VR / 360 degree support, however, I'm thinking it will help VR adoption if there's availability from sources that aren't 100% proprietary.

Thanks for reading.

Copied from original issue: mediaelement/mediaelement#1874

Hello, I'm trying ChromeCast plugin for Android devices (smartphone, tablet), but this does not show to send to ChromeCast through the Chrome browser, only work in PC

From @alindt on November 7, 2016 7:36

It would be a really great feature to be able to customize subtitle font/color/size/style from the CC menu in the player. Maybe even saving those custom settings in some cookies, per site?

Youtube example:

jwplayer example:

Copied from original issue: mediaelement/mediaelement#1919

how to get rid of Global Options drop down menu without deleting audioplayer styles? for multiple players on page.

Is it possible to set the default audio in the player?

It would be helpful to see an example or sample code of the vast/vpaid plugin working.

I have tried setting the vastAdsType, vastAdTagUrl as well as adsPrerollMediaUrl[] but the best I could get was the ad plugin calling the vast ad and raising an error "Uncaught (in promise) DOMException: The element has no supported sources".

regards,
Bob

I have try but it not working....

@rafa8626 : Please push one demo about this?

Hi,

Im having an issue, with desktop, VAST works good on ios and android, but on desktop it plays the ad, but does not play the trailing m3u8 stream and throws the error Uncaught (in promise) DOMException: Failed to load because no supported source was found when trying to set the SRC variable.. If we disable vast, the m3u8 stream plays fine. Please check https://goo.gl/Wh94gf

The regular video is not set to autoplay. When the VAST xml is parsed and the ad is injected into the video it starts to autoplay.

Additionally, the regular video is available to start playing before the vast xml is returned and the ad injected. The canplay event is happening before my ad loads.

Hello and good day. I am using the Preview Plugin and I had wanted to know if there is a way to keep the video playing when a user hovers over the div underneath the video ( where the title and buy button are ): https://mmt.staging.wpengine.com/

Thank you and have an amazing day! :)

I receive the following error when streaming a live HLS via the Chromecast plugin.
chromecast.js:294 Uncaught (in promise) TypeError: mediaElement.originalNode.getCurrentTime is not a function at chromecast.js:294 at <anonymous>

Prerecorded .m3u8 files stream via the chromecast plugin just fine. It's only the live .m3u8 videos that are throwing this error. I understand that a live HLS feed may not have a timecode associated with it, does this prevent mediaelement.js+chromecast.js from working? Is there even a way to fix this?

I having try develop a plugin with simple download button. It will embed on top-right corner of mejs player.

I will show/hide when user hover to player (like control bar).

Please add event of this.

I got a single page website, so when I create a new player i get this error:

Uncaught DOMException: Failed to execute 'registerElement' on 'Document': Registration failed for type 'google-cast-button'. A type with that name is already registered.

I'm creating a player first without a source and getting this error:

error building chromecast Error: url argument must be a string

The reason is cuz i have not put any src on the video yet.
I'm doing it afterwards since i need multiple sources player.setSrc([...])

Hello and good day.

I had wanted to know. Now that there is a hover to play preview mode, can the video itself be clicked on to send a visitor to another page?

Thank you and have an amazing day! :)

I'm using React to build a single page app, and as I "re-mount" the player and cast I get different results. Sometimes it works, sometimes it doesn't. Sometimes it throws:

Unknown error: session_error
_getErrorMessage @ player.js:296
castSession.loadMedia.then @ player.js:240

steps to reproduce:

• Mount Mediaelement player.
• Cast to a chromecast device.
• stop the cast and unmount the player.
• Mount Mediaelement player.
• Cast to a chromecast device.

I've been trying to clean up the cast session when unmounting the player so when I mount it again, the entire environment is exactly the same as when I mounted it and casted for the first time.

Casting works perfectly using the latest versions, mediaelement 4.2.2 and mediaelement-plugins 2.3.0.
Mounting and unmounting works fine when just using the player.

This is the function that throws the error as it fails to load media request: (player.js:231)

castSession.loadMedia(request).then(() => {
			// Autoplay media in the current position
			const currentTime = t.media.originalNode.currentTime;
			t.setCurrentTime(currentTime);
			t.play();

			const event = mejs.Utils.createEvent('play', t.media);
			t.media.dispatchEvent(event);
		}, (error) => {
			t._getErrorMessage(error);
		});

I do the following when unmounting to stop the cast, after pausing and removing the player:

          if(window.cast){
            let context = window.cast.framework.CastContext.getInstance();
            if(context.getSessionState() !== "NO_SESSION" && context.getSessionState() !== "SESSION_ENDED"){
              context.endCurrentSession(true);
            }

Cast stops. No errors.

Setting up a breakpoint in player.js:231 -> castSession.loadMedia(request).then(() => {
I found out that previous sessions still exists as more requests to loadMedia are being sent as I repeat the mounting-unmounting process over and over.

Steps to reproduce:
Mount a player with channel A as a source. Cast, stop, unmount.
Mount a player with channel B as a source. Cast, stop, unmount.

Now, mount the player again with channel C as source and cast with the breakpoint enabled.
Execution will stop due to the breakpoint on line 231.

If you wait, you'll see channel A being casted, which makes sense if you examine the request content while on break.
Resume execution.
Execution stops again due to a request to cast channel B.
Resume execution.
Channel B is now being casted....
Execution stops again due to a request to cast channel C.
Resume.

Notes:

• I never got a session error while debugging and waiting for the cast to stream.

• Sometimes I get several session_error messages at once. Because it's loading all the previous contents. Sometimes all of them throw the error, sometimes one of them, etc.

• The event listener added on line 282 of chromecast.js remains being called for previous sessions as well:

t.media.addEventListener('loadedmetadata', () => {
			if (['SESSION_ENDING', 'SESSION_ENDED', 'NO_SESSION'].indexOf(castSession.getSessionState()) === -1 &&
				t.proxy instanceof DefaultPlayer) {
				t.proxy.pause();
				t.proxy = new ChromecastPlayer(t.remotePlayer, t.remotePlayerController, t.media, t.options);
			}
		});

It can be verified by setting a breakpoint on that line.

Bottom line I need to eliminate those sessions. Any ideas on how to achieve that?

Thanks in advance.

Hello and good day! :)

If it is not too much trouble, is it possible to add an option to have a delay before the hover to preview begins? This way if a person is moving their cursor over a few thumbnails to get to one they do not all get triggered.

Please let me know what you think and have an amazing day! :)

inEvents has added to qualitiesButton, but outEvents has added to qualities-selector.

When mouse over qualitiesButton Qualities selector will be shown and when mouse leave button and not leave Qualities selector, Qualities selector will not disappear.

`diff --git a/demo/index.html b/demo/index.html
index fb4c5f9..d1799e5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -84,7 +84,7 @@
Română / Romanian (ro)
Русский / Russian (ru)
Slovensko / Slovak (sk)

•                <option value="zh-cn">简体中文 / Simplified Chinese (zh-CN)</option>
  

•                <option value="zh-CN">简体中文 / Simplified Chinese (zh-CN)</option>
                 <option value="zh">繁体中文 / Traditional 
  

Chinese (zh-TW)



`

Hello and good day! :)

Someone had just made a request to disable hover to preview feature while the user is scrolling the page. Is this a possible option? Thank you! :)

From @info2000 on May 23, 2014 22:23

Hi, i want know if is vpaid supported by some plugin or external library.
If no, i will sponsor it

Thanks

Copied from original issue: mediaelement/mediaelement#1205

Hi
I am not sure whether I should post this here or on the main mediaelement download site. I see there is a plugin for a playlist here but not sure how to implement it.
On the previous version of mediaelement I had the following code, which I think I obtained from mediaelement resources.
HTML

<head>      
<script src="js/jquery.1.12.4.min.js" ></script>  
    <script src="build/mediaelement-and-player.js"></script>`
<link rel="stylesheet" href="build/mediaelementplayer.css" />
<script type="text/javascript">		
			// global for movie player
			var player;
			$(document).ready(function () {
				player = new MediaElementPlayer('#videoPlayer');
			});
			function ChangeVideo(vid) {
				var newSrc = '';
				switch (vid) {
					case 1:
						newSrc = 'video/big_buck_bunny_480p_surround-fix.mp4';
						break;
					case 2:
						newSrc = 'video/sintel-1024-surround.mp4';
						break;
					case 3:
						newSrc = 'https://www.youtube.com/watch?v=twYp6W6vt2U';
						break;	
				}				
				player.setSrc(newSrc);			 
				player.load();
				player.play();
				return false;
			}		 
		</script>
</head>
<body>
<video id="videoPlayer" style="width:100%; height:100%;" src="video/big_buck_bunny_480p_surround-fix.mp4" width="100%" height="100%" poster="video/bbb.png"></video>
		<a href="#" onclick="return ChangeVideo(1)">video 1</a><br />
		<a href="#" onclick="return ChangeVideo(2)">video 2</a><br />
		<a href="#" onclick="return ChangeVideo(3)">video 3</a>
</body>

I have looked at the documents, tried with demo.js(this works but I have no idea on how to use a list rather than the select dropdown -eventually I want to use images in a carousel). I have been at it for days. Any help in this matter would be greatly appreciated.
Thanks in advance
Rob

I have a request for videos that autoplay on hover. Options could be to return the image when a user hovers off the image, to reset the video or simply pause the video so it starts where it was left off.

Please watch the hover effect on thumbnails to see what I mean: https://pixabay.com/en/videos/list/?q=dance&image_type=video&cat=&min_width=&min_height=

Thank you for all your hard work and have an amazing day!

@rafa8626 Please check it

When trying to access a HLS stream (.m3u8) in Chrome via API get Uncaught (in promise) DOMException: Failed to load because no supported source was found when trying to set the SRC variable.

Example:

http://download.alldigital.net/00000001/00000001/MCWE/player/mediaelement-mediaelement-d7843f9/demo/player_24.html

May want to have simple sample that includes promise set up required for newer Chrome Browsers.

I have try with sort document at here:
https://github.com/mediaelement/mediaelement-plugins

But failed. Please provide some demo about implement plugin on mediaelement

For Example speed plugin.

I'm pretty new to node and trying to get the video working in my vuejs project. It would be great of mediaelement-plugs was an npm package so we could both use npm as well as use import statements to pull it into our code.

Any thoughts?

2.0 is supported only :-(

source choser wasn't really what i was looking for...
it only allows switching source. not changing the quality in a one dash or hls stream that has multiple sources in one

I was wondering if we could enable some more styling for markers such as width or any other suggestions.

I'm happy to send a PR for this.

Installing the skip-back feature in a mediaelement player, then clicking the skip-back icon fires this error:
Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
The video does not skip back.

I have a pull request ready to go for this issue.

In the WordPress plugin WP_PLUGIN_URL is used to load the CSS etc. Because it is a const it can not follow a change from http to https. The browser rejects it as cross-protocol.

Fix is easy. Replace all occurances of "WP_PLUGIN_URL" with the function "plugins_url()'

https://wordpress.org/ideas/topic/wp_plugin_url-doesnt-take-ssl-into-account

mediaelement-and-player.js:8808 Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined
at http://ecfd13.pfizer.com/sites/KAMCoE/SiteContent/js/VideoJs/build/mediaelement-and-player.js:8808:11
at Array.forEach (native)
at http://ecfd13.pfizer.com/sites/KAMCoE/SiteContent/js/VideoJs/build/mediaelement-and-player.js:8807:6
at Object.27.2 (http://ecfd13.pfizer.com/sites/KAMCoE/SiteContent/js/VideoJs/build/mediaelement-and-player.js:8820:3)
at s (http://ecfd13.pfizer.com/sites/KAMCoE/SiteContent/js/VideoJs/build/mediaelement-and-player.js:11:257)
at e (http://ecfd13.pfizer.com/sites/KAMCoE/SiteContent/js/VideoJs/build/mediaelement-and-player.js:11:428)
at http://ecfd13.pfizer.com/sites/KAMCoE/SiteContent/js/VideoJs/build/mediaelement-and-player.js:11:446

From @isantolin on February 8, 2017 18:51

@Ron666 A lot of players now includes Chromecast support

• VideoJS: https://github.com/benjipott/video.js-chromecast
• Flowplayer: https://flowplayer.electroteque.org/chromecast

Its a good feature, because in the case of Flowplayer is a pay plugin

Copied from original issue: mediaelement/mediaelement#2065

Hi,

The update in 2.2.1 to stop interacting with progress/jump buttons while an ad is playing is great - but I think there may be an issue when used with the Jump Forward plugin too.

As the code to disable the buttons runs as part of the function adsPrerollStarted, it's possible before you start playing to press the 'Jump Forward' button, and it'll start playing further in (or skip the ad completely if its duration is less than your jump forward).

From a quick bit of testing - if the disable code is moved slightly earlier into the adsStartPreroll function, it seems to work fine but I don't know if this would have any other affects.

Happy to make a branch and submit a pull request for this if you'd like.

I've noticed that if you keep pressing jump forward button, it repeats to the beginning of the file in a loop. Skip back does not.

The chromecast plugin is an excellent addition, thanks for your work. I have noticed two related behaviors:

1. Unable to cast 'on the fly' when video is already playing.
2. Unable to begin from the middle of a video.
   Both of these cases results in the grey screen with the little blue chromecast icon, but no video.

For observation purposes:
https://anchored.countrysidebible.org/?lesson=the-inerrancy-preservation-and-translation-of-scripture-part-2&media=video

https://countrysidebible.org/cbcmedia?return=single&mediacode=ja170423a

From @hitechwebsites on September 24, 2015 9:40

Hi,
When using chapters in Firefox 41 the widths are set at 2%, 3%, 3%, 3% ...... and the last one has the remaining space. Would it not be more practical to set the chapters as a dropdown menu with greater widths. At present this is not very user friendly
Chapter bar:

Firebug sizes:

Copied from original issue: mediaelement/mediaelement#1598

I am using medialement plugin in my app and it was working fine earlier but suddenly it stopped working in google chrome latest version.

I checked the google chrome version in which it is still working is 53.xxx

and now google chrome updated to 56.xxx.

I tried few thing and one thing that partial worked is when I set type="video/x-m4v". but this is not fully workable in large app.

Hello and good day.

Right now the preview feature resets the video to the start when the mouse hovers out. Is it possible to have an option to pause? After testing I can see how some visitors may want to start off where they left off when they hover back on a video to play. With it being optional we can test to see what is best.

Thank you and have an amazing day! :)

From @jrglasgow on October 20, 2016 14:56

For accessibility reasons we need the ability to have Audio Descriptive tracks which allow blind users to know what is happening in the video.

The audio track HTML element which is not yet supported buy all browsers would cone a long way toward helping with this issue.

http://www.w3schools.com/tags/av_prop_audiotracks.asp

Copied from original issue: mediaelement/mediaelement#1891

Is there a way to use the skip back and jump forward plugins when the audio player is not playing when the player has loaded for the first time? Currently, the only the way for those plugins to work is when the audio player is playing. When the player has started to play the media file and then pause, you can use those plugins.

Example of what I'm talking about:
[initial/first time loading]
Skip and Jump forward do not work

[player is player]
skip and Jump forward do work

[player is paused]
skip and Jump forward do work

Thanks