afarkas / jmediaelement Goto Github PK

View Code? Open in Web Editor NEW

150.0 150.0 23.0 139.17 MB

jquery multimedia framework

License: GNU General Public License v2.0

JavaScript 63.66% CSS 36.34%

jmediaelement's People

Stargazers

Watchers

jmediaelement's Issues

Problem integrating controls with API

Hello.
I have posted this on the forum - however since I got no response I'm reposting it here since it looks to me like a bug.

I have a problem when trying to use both controls an API to control my audio element - It seems as if the connection between the controls and the element is lost.

I have the following code copied from one of your demos for the audio player slightly modified (no sources inside the audio element):

<div class="media-player">
      <audio id="auscplayer" controls="controls">
      </audio>
      <div class="media-controls">
           <a class="play-pause"><span class="ui-icon"> </span><span class="button-text">play / pause</span></a>
            <span class="current-time player-display">00:00</span>
             <div class="timeline-slider">
                  <span class="handle-label">play position</span>
                  <div class="progressbar"></div>
             </div>
             <span class="duration player-display">00:00</span>
              <a class="mute-unmute"><span class="ui-icon"> </span><span class="button-text">mute / unmute</span></a>
              <div class="volume-slider"><span class="handle-label">volume control</span></div>
      </div>
  </div>

The controls load and display OK with:
Copy code

 $('div.media-player').jmeControl();

When the user clicks some element on the page the following code is executed:

  $('#auscplayer').pause();
  $('#auscplayer').attr('src','dbwav.ashx?sid='+sessionId+'&mid='+this.name);
  $('#auscplayer').loadSrc().play();

What happens is that the audio will play OK. Even the play/pause button will display the pause icon. However the controls will not work. The duration and position will not change. Trying to click the pause button or the mute button will not work. Trying to change the volume will not work.

Any suggestions? Is this a bug?

I'm using FF 3.6.13

Thanks
Sebastian

Video and poster image not displayed correctly when in fullscreen mode (portrait orientation)

When in fullscreen mode in portrait orientation, the video is not always sized correctly, some of the video element seems to get clipped. Additionally, the poster image that gets displayed once the video ends, is stretched vertically.

Environment: iPad iOS 4.3
Orientation: Portrait
Test Page: JME 2 + jQuery Mobile Demo (jme-jqm.html)

Cheers,
Matt

Change event called twice when using spacebar to toggle play/pause checkbox control state

When using a checkbox control for the play/pause toggle, the change event is fired twice when using the keyboard (spacebar) to check or uncheck the play/pause checkbox control. This issue applies to the JME 2 + jQuery Mobile branch. I'm currently investigating this issue.

Alexander, if you have any insights, let me know.

Cheers,
Matt

Youtube integration does not work with jME v1.3.4 under Chrome

There is a playback issue with the Youtube videos under Chrome. Clicking on the play button it will start to load the video from youtube api, but it wouldnt play it. This works OK under Firefox 13

jQuery 1.7.1, timeline slider and time display do not function

On quickstart-controls.html, demo package, change jquery version to 1.7.1 (to eliminate event.layerX warnings). Select play. Vid plays but time display and timeline slider to not change. Replicated on Safari 5.1.2 and Chrome 16.0.912.63.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Simple predefined Controls Demo</title>
        <link rel="stylesheet" href="css/styles.css" />

        <link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css"/>
        <link rel="stylesheet" href="css/player-controls.css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <!-- ui-components: you only need slider + progressbar -->
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
        <!-- END:  ui-components -->
        <!-- optional for a11y-slider -->
        <script src="../utils/a11y-slider.ext.js"></script>
        <!-- END: for a11y-slider -->

        <!-- full jme script -->
        <!-- configure path to swf-fallback: script.jwPlayer[src] -->
        <script class="jwPlayer" type="application/swf" src="../packages/player.swf"></script>
        <script src="../packages/mm.full.min.js"></script>

        <!-- jmeEmbedControls: good for rapid development and quick start -->
        <script src="../utils/jmeEmbedControls.js"></script>

        <script>
            $('html').addClass('js-on');
            $(function(){
                $('div.media-player').jmeEmbedControls();
            });
        </script>

    </head>
    <body>
        <h1>Demo for jmeEmbedControls</h1>

        <h2>Videoplayer</h2>
        <div class="media-player">
            <span class="media-label">video: big buck bunny</span>
            <video poster="media/bbb_watchtrailer.gif" controls="controls" preload="none">
                <source src="media/bbb_trailer_mobile.m4v" type="video/mp4" />
                <source src="media/bbb_trailer_400p.ogg" />
            </video>
        </div>

        <hr />
        <h2>Audioplayer</h2>

        <div class="media-player">
            <!-- class for labelling a player good for a11y -->
            <span class="media-label">audioplayer</span>

            <audio controls="controls" preload="none">
                <source src="media/swazzrokk_v1.mp3" type="audio/mpeg" />
                <source src="media/swazzrokk_v1.ogg" type="audio/ogg" />
            </audio>

        </div>

loadSrc fail with Safari Windows w/QuickTime

I'm not sure if I'm doing something wrong, but this seems like a bona fide bug...

I'm using loadSrc() on an audio element. All works correctly in Chrome, IE, and Firefox, but Safari fails to play the updated file. (All play the initially embedded file.)

My initial audio element looks like this:

<audio id="audio" controls="controls">
   <source src="audio/myaudio.mp3" type="audio/mpeg" />
   <source src="audio/myaudio.ogg" type="audio/ogg" />
</audio>

Runtime code looks like this:


var srces = [
      {src:"audio/somenewfile.mp3", type:"audio/mpeg"},
      {src:"audio/somenewfile.ogg", type:"audio/ogg"}
];
$("#audio").loadSrc(srces);

If I inspect the element after running this code, Chrome shows updated child elements. However Safari shows the as empty... meaning Safari wiped out the initial child elements, but did not replace them correctly.

One difference I can see during runtime occurs on line 287 if mm.full.js:
if(fixPreload.addSrces(elem, value, preloadPass)){return;}

Chrome returns false on this, but Safari returns true and drops out of the function, failing to execute what follows... which includes the code that creates the new child elements.

I'm using:
jMediaelement v1.3 (stable build)
Safari 4.0.3
QuickTime Player 7.6.5
Windows XP

Great code otherwise... thanks for putting it out there!

fallback Mp3 Firefox

Hi Alex,
thanks for all the players! I have a problem with MP3 in Firefox. Unfortunately, the fall-back starts (JW player) does not. The Flash Player is not included.
Interestingly, "$ support.audio ($('< audio />')[ = 0] canPlayType);.." Also returns true.

Thanks

'timeline-slider' does not work with jQ 1.7.1

Hi,
As the handle 'timeline-slider' are ok with jQ 1.6.4, it does not move anymore during playback with jQ1.7.1

.isPlaying() is false while video actually playing

.isPlaying() is false while the video is actually playing, if the video has previously reached the end.

A workaround is to save the value of .isPlaying() before calling .currentTime(n) and restore it afterwards using either .play() or .pause().

The following html/javascript page requires jquery and jme 1.3.4, plays the video automatically, and reports the issue in the browser console in Firefox 6.0.2 running on Ubuntu.

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="jme/mm.full.js"></script>
<video src="http://www.protofunc.com/jme/media/bbb_trailer_400p.ogg" controls autoplay="autoplay"></video>
<script>
    $(document).ready(function(){
    $("video").jmeEmbed().jmeReady(function() {
        $("video").
        currentTime(30).
        bind("timeupdate", function(){
            $("span").text($("video").isPlaying());
        }).
        bind("ended", function(){
            $("video").currentTime(10);
            $("video").bind("timechange", function(event, data){
            console.log("The video is playing (second "+ data.time +") but isPlaying() returns "+ $("video").isPlaying());
            });
        });
    });
    });
</script>

Audio description

Is audio description available for jMediaelement or at least planned for a futur release?

load Shoutcast Stream with jMediaelement

Hi
thank your for the plugin,it is very nice.

how i can load url for Shoutcast Stream (http://srv2.streaming-ingenierie.fr:8142/;stream.nsv)
im trying to create radio plugin with playlist.

thanks.

Calling jQuery UI's slider() method may conflict with other libraries such as jQuery Mobile

Hi Alexander,

I did some more investigation regarding jme2 compatibility with jQuery Mobile that we spoke about. The issue is that jQuery Mobile includes it's own slider plugin who's calling method's name (i.e. $('input').slider(); ) collides with jQuery UI.

See jQuery Mobile Slider Documentation

To work around this, I aliased the jQuery UI slider within jme.js:

    /* Alias jQuery UI slider to avoid conflicts with other libraries (i.e. jQuery Mobile). */
    jQuery.fn.uislider = jQuery.fn.slider;

Then I modified all the calls to the slider method with uislider. Example:

    control.uislider({
        range: 'min',
        max: duration || 1,
        disabled: !duration,
        step: 0.1,
        value: media.prop('currentTime'),
        slide: function(e, data){
            if(e.originalEvent){
                time.set(data.value);
            }
        }
    });

What do you think of this approach?

Let me know if you want me to commit my updates.

Cheers,
Matt

Not correctly stripping parameters from sources

Today I built player where one had a video-file and where one was able to upload a video that then replaced that video-file - but bearing the exact same name. So I needed to suppress user-agent-caching of the file and appended a constantly changing "?nocache=xyz" to it. When doing this the video-player broke (at least it did under Firefox with the JWPlayer-fallback) and I found out why: In line 212 you add the "?" to the file-extension, which then cannot be resolved into any known mime-type (e.g. instead of "mp4" one gets "mp4?"). When changing the line from "var pos = (src.indexOf('?') + 1)," to "var pos = (src.indexOf('?') + 0)," everything is back on track and fine.

jmeControl and Apache

Hi,
i've embedded JME in a website. JME works if i use the file protocol but when i visit the web with apache it still play the video (it isn't the MIME type or the .htaccess) but the time slider, the volume slider, the user activity, the fullwindow or the media state stop working. The html is more or less the same as the official demos, i think the problem is with the jmeControl function because nothing below it is executed but the syntax is ok and it should work. It also doesen't work with jmeEmbed. Here is the javascript code:

$(document).ready(function(){
            $('html').addClass('js-on');
            $(function (){
                $('div.media-player')
                .jmeControl({
                    addThemeRoller: false,
                    volumeSlider: {
                        range: 'min',
                        mutestate: true
                    },
                    timeSlider: {
                        range: 'min'
                    },
                    fullscreen: {
                        tryFullScreen: !!$.browser.mozilla
                    }
                });
                $('div.media-player').bind('useractive', function(){
                    $('div.media-controls', this).stop().animate({opacity: 1});
                });
                $('div.media-player').bind('userinactive', function(){
                    $('div.media-controls', this).stop().animate({opacity: 0});
                });
                $('div.media-controls', this).find('div.media-controls');
                $('div.media-controls', this).css('opacity', 0);
                $('video').bind('click',function(){
                    if (pausa==true){
                        $('video').togglePlay();    
                    }
                });
            });
                $(document).bind('play',function(){
                    $('.media-state').toggle();
                    pausa=true;
                });
                $(document).bind('pause',function(){
                    $('.media-state').toggle();
                });

JME Audio Playlist in Demo

Hi,
the Audio Playlist Demo is not working.
There seems to be a bug in it:
Error: $.multimediaSupport is undefined
/jme-latest/plugins/playlist.js
Row: 151

and

Error: $("div.media-player").jmeControl is not a function
/jme-latest/demos/more-examples/3-audioplayer-playlist.html
Row: 38

HTML5/MP4 and Flash/FLV

I have been trying to do HTML5/Flash player. I don't care what falls back to what I just need to make sure HTML5 plays MP4 and Flash plays FLV. HTML5 players use HTTP range requests to do their seeking and flash player uses a 'start' parameter. My webserver can only handle this start parameter on FLV files so its very important the Flash player does not just play the MP4 as the user will not be able to seek.

Buffer progress bar isn't accurately updated while video is playing or paused.

The buffer progress bar on the JME 2 + jQuery Mobile demo page is not accurately updated while the video is playing or paused.

youtube player not working

http://tienganh365.vn/san-pham/rolling-in-the-deep/ you can see it not working
this error https://www.youtube.com/apiplayer?version=3 Failed to load resource: the server responded with a status of 404 ()

Android 2.3.3 Playlist not working

I have tested the playlist on three different Android 2.3.3 platforms and it only plays the first song of the playlist then stops. Is there a work around for this?

Howto create vertical volume slider?

When calling the jMe API, i can only use this markup:
< div class="volume-slider" title="volume slider" >< / div >

Which will be replaced by a horizontal volume slider.
How can I adjust the volume handle to be vertical (bottom/silent to top/loud)?

typo on front page

http://www.protofunc.com/jme/

Where it says "download the hole project" - that's probably supposed to be "whole project"

reading speed ?

I'm looking for something that could slow or accelerate the reading of a video.

Is there such a control ?

thank you

mp3 audio playback in Firefox

Hello, first of all — huge thanx for your amazing work.
Cath strange bug in Firefox (I have only MP3 files for streaming), playback will start only after full caching of mp3. So user got a huge delay between changing tracks. Is it a Flash problem?
You can see what I meen on www.tangoproject.ru. Player is sticky with the left side.

API included?

Hi,
This isn't really an 'issue', but would it be possible for the API documentation to be included in this repository?
Previously I have been using the documentation located here:
protofunc.com/jme/documentation/documentation-api.html
but that site has been down for at least several weeks. Plus if it's in the repository it can be version controlled.

(If this documentation is already here somewhere, sorry, but could you point me to it?)

Poster Plugin for JME

Hi Alex,

I've put together a poster plugin for JME that I'd like to contribute to the project. I tried to keep it consistent with the track plugin. It simply allows the poster image to be redisplayed once the media element has ended. I couldn't attach the binaries (i.e. video files and poster images I used), git seems like it only accepts text files. Anyway, here's the link to the files I could attach.

https://gist.github.com/1215296

Let me know if you have any questions.

Cheers,
Matt

fix poster

Problem with loading image on iPad

In some times when pauses a video, if you re-play the loading image don't disapper in frontof the video...

afarkas / jmediaelement Goto Github PK

jmediaelement's People

Stargazers

Watchers

Forkers

jmediaelement's Issues

Recommend Projects

Recommend Topics

Recommend Org