[Solved] No Sound on Apple Devices & Mobile Embed Issues

edited April 2016 in Bugs and Errors
Hello,

I have what I thought was a working CumulusClips (2.3.1) install on 64-bit Centos 6.7 and am using the CC-provided ffmpeg encoder. The video used in the below example is private and has closed comments.

Issue 1:
When visiting the page with all of the mobile devices I've tested (Android phones, iPhones, iPads) the video thumbnail doesn't appear when embedded. For example, visit this page (http://goo.gl/vse7on) with your computer web browser, and then use a mobile device. The computer web browser shows the thumbnail, while the mobile device shows the public videos, with (obviously) no way to find the private video. If you click the private video link at the top of the page, it takes you to the private video page and you can play the video. This is an extra step that I'd like to not make my users take when embedding a video on their site.

However, the video works fine on my Android device and desktop computer, but that bring me to issue #2.

Issue 2:
There is no sound on the mobile Apple devices I've tested, and I've tested the above link with Safari, Firefox, and Chrome for iPad. The videos that have sound, because all formats (webm, mp4, ogg) play fine if played directly from the webm/, theora/, mobile/, h264/ directories.

Here is the system log for this particular video: https://goo.gl/rgUJDS

I'm sure the entire issue is one I've created myself, but I'm at a loss at this point. Does anyone have any idea what I can do to fix these issues?

MartinJ

Comments

  • Could you try your mobile encoding with these options:

    -threads 0 -vcodec libx264 -vf "scale=min(640\,iw):trunc(ow/a/2)*2" -vb 600k -ac 2 -ab 96k -ar 44100 -f mp4 -strict -2

    and see if that makes a difference?
  • GreenMotion -

    That fixed Issue #2! Thank you! I'm assuming I can write a script to re-encode all of my videos with these new flags and place them in the mobile/ directory, correct?

    Now, anyone have an idea regarding Issue #1?

    Thanks again, @GreenMotion!

    MartinJ
  • I visited the link you posted above using both a desktop and iPhone. The desktop embedded videos played fine. The phone displayed the mobile site within iframes (meant for the embedded video) instead of the actually embedded video. That is clearly a bug in the script. Is this what you mean by issue number 1?

    If not, would you mind elaborating a little more so that we can reproduce and see the issue you're encountering?

    Either way I will bring up my findings detailed above with our engineering team.
  • Damian -

    Thanks for taking a moment to check the link.

    Yes, a page with an embedded video looks fine when viewed from a desktop browser, but it shows only the front page of the mobile site - not the video - when viewed from a mobile browser.

    To reproduce:
    1.) Copy the 'embed' code of a (private or public) video and put it in a web page.
    2.) View the page from a mobile browser - the video isn't embedded, just the front page mobile site.

    Does that make any sense?

    Thanks,

    MartinJ
  • edited April 2016
    Got it, that's what I mentioned earlier.

    I brought it up with our team and it will be addresses in our next patch release. I will keep you posted as to when the fix is implemented.

    As a temporary workaround, open the file: /cc-core/lib/Router.php and approx. around line 554 you will see the "embed" route. Add this code right before the "name" property:

    'type' => Route::AGNOSTIC,

    That should fix the problem.
  • Excellent!

    Thank you so much @Damian and @GreenMotion!

    Martin J
  • Well, I thought everything was fixed! The mobile sound is still wonky.

    Here's an update:

    @Damian, adding the AGNOSTIC route now does show the thumbnail, but if I click on the embedded video, it plays with no sound.

    The video was encoded using @GreenMotion's fix, and if I include the private link to the video, it plays from within CC's mobile page for that video.

    Does that make sense?

    To Reproduce:
    1) Make an HTML page with a link to any video (public or private).
    2) Also add the embed code to the page below the hyperlink
    3) Click 'play' on the embedded video from a mobile browser. There will be no sound.
    4) Click the hyperlink and click play on the video within the CC mobile site - the video plays with sound.

    Thoughts?

    MartinJ
  • Thats odd martinj. I was able to reproduce the embed issue, but not the loss of sound issue. Is this with the newly encoded mobile videos?
  • edited April 2016
    Hi @GreenMotion.

    If you check the original page (http://goo.gl/vse7on) on an Apple device, the thumbnail now shows on the embedded video, but when you click play, the video has no sound.

    If you click the link at the top of that page (the private video link), it show the CC mobile site with the video, and plays with sound.

    Prior to your updated mobile encoding flags, I couldn't get sound with the video at all.

    Hope that makes sense,

    MartinJ
  • I am wondering if encoding options that caused your sound issues on your mobile videos, are causing a similar issue on your regular videos.

    Let me give you the encoding options for the regular video format I use. They are as follows:

    -threads 0 -vcodec libx264 -vf "scale=1280:trunc(ow/a/2)*2" -acodec aac -ab 128k -ar 44100 -f mp4 -strict -2

    And of course for mobile:

    -threads 0 -vcodec libx264 -vf "scale=min(640\,iw):trunc(ow/a/2)*2" -vb 600k -ac 2 -ab 96k -ar 44100 -f mp4 -strict -2

    For my thumbnail I use:

    -vf "scale=min(640\,iw):trunc(ow/a/2)*2" -t 1 -r 1 -f mjpeg

  • edited April 2016
    Thanks for the reply, @GreenMotion.

    Before I attempt your suggestion, I just want to be clear. Are you implying that changing the encoding options for the regular video format might affect the ability for mobile devices to play the embedded video?

    Currently, all non-mobile browsers that I've tested on all platforms (Mac, Linux, Windows) play the embedded regular videos correctly.

    Thanks - just want to be certain I understand you.

    MartinJ

  • What @GreenMotion makes sense because the video that plays in the embed window is the desktop H.264 video, not the mobile H.264 video.

    If you fixed the encoding for the mobile videos that should fix the sound for the mobile H.264 videos played in the mobile theme. It won't affect videos displayed in the embed window, regardless of the device being used, because the embed window and it's player don't factor in mobile vs desktop. It always uses the desktop videos.

    I recommend implementing both of the encoding options @GreenMotion suggested above (the one for mobile H.264 and the one desktop H.264). Then upload a brand new video to ensure it was transcoded using the options above. Once the video is approved and available, update your test page with the embed code and link.

    Also, for now while we are testing and debugging, would you mind not marking the video as Private. This will help us trace issues a little faster during this process.
  • edited April 2016
    @Damian - thanks for the great explanation; that makes perfect sense.

    I did re-convert one video (the last video listed on the page here: http://goo.gl/vse7on) using the flags suggested by @GreenMotion and the sound now works on Apple devices!

    The first two videos only had the new mobile encoding flags; the last video uses all of @GreenMotion's flags.

    I've also marked the videos public, in case you would like to look at them further.

    I don't remember changing the default encoding options, but I may have; it's been a couple of years.

    My original desktop.h264 was:
    -vcodec libx264 -vf "scale=min(640\,iw):trunc(ow/a/2)*2" -vb 800k -acodec libmp3lame -ab 96k -ar 44100 -f mp4

    My original mobile.h264 was:
    -vcodec libx264 -vf "scale=min(480\,iw):trunc(ow/a/2)*2" -vb 600k -acodec libmp3lame -ac 2 -ab 96k -ar 44100 -f mp4

    Are those the out-of-the-box settings, or did I muck them up along the way?

    Thanks to you both for all of the help - it looks like these new options will work. I'm in the process of scripting a re-encode for all of my existing videos (those on the page included).

    MartinJ
  • Glad it worked. I don't remember what the default options were either. I've played around with so many settings these may as well be custom.

    Looking at the options you had, the first thing that jumps out to me is the libmp3lame audio codec you were using. As you can see, I am not using that in my options. so something tells me that setting *may* have been causing compatibility issue with some of your videos.

    In any case, glad this now works for you!. Good luck with your re-encode script!

    Cheers,

    GM
This discussion has been closed.