Do not want the "Play with TechSmith Smart Player download from the App Store" overlay on my videos

  • 4
  • Problem
  • Updated 3 years ago
  • Solved
Thanks in advance for any help you can provide.

I am hosting videos (software demonstrations) on my corporate website - we host our own videos and aren't interested in Screencast.com. There are no interactive features on the videos. Our videos were produced using Camtasia Studio 8.

When someone visits our page from an iPhone/iPad, they get a nagging overlay on the video to "Play with TechSmith Smart Player... download from App Store" so when visitors think they are clicking to play the video, they actually get taken to the App Store!!! The actual play video button is buried at the bottom of the video.

This is not at all intuitive and I have already had several complaints.

Is there some way to disable that overlay, so that clicking the play button will actually play the video???

Thanks again!
Photo of Andrew

Andrew

  • 5 Posts
  • 0 Reply Likes
  • frustrated

Posted 7 years ago

  • 4
Photo of Andrew

Andrew

  • 5 Posts
  • 0 Reply Likes
I see that some other people are having this problem, and I managed to come up with a workaround. I'll try to explain the workaround here best I can.

We'll change 2 files (below) then these can be used anytime needed to replace the standard Camtasia output. In your output folder, you'll see a bunch of files and 2 subfolders (scripts and skins). The first part is easy (changing the CSS), the second part is a little more complicated (changing the javascript).

STEP 1: Change the CSS

Open the SKINS folder, then open the OVERLAY folder. Use a text editor to edit the player-min.css file and use the find function to locate the class called .appNuevoPlayBtn. Copy everything after "open" bracket there (starting with display:block) including the nonsensical text until you reach the "close" bracket (which is just before the .appStoreBtn class). This is the "play" button which actually takes visitors to the app store instead.

Now, use the find function to locate the .appNativePlayBtn class and replace its entire contents (including the nonsense text) between the "open" bracket and "close" bracket with the stuff we just copied. Then, we'll change the width and height properties to 183px, add in "position:relative", and set "top:20%". After STEP 2 below, this will make the REAL play button that is at the bottom of the video look like the real iPhone play button (instead of a small box at the bottom of the video).
Photo of Andrew

Andrew

  • 5 Posts
  • 0 Reply Likes
STEP 2: Change the Javascript

Go back to the root directory and choose the SCRIPTS folder. Use a text editor to edit the player-min.js file. Use find (ctrl + F) to locate the following phrase exactly as its written:

class="posterFade"

This is the portion of the javascript that puts the App Download overlay on the screen, so here's how we remove it...

First, remove everything BETWEEN the DIV with class=posterFade and the anchor link with class="appNativePlayBtn". Do NOT remove the DIV or anchor links... only the stuff between them.

Next, remove the entire DIV section with class="appNativePlayBtnText".

Your end result should look something like this (I added the spaces/lines to make it readable here but your final output should not have them):


function aN(){
var cl='
<div class="appplayer">
<div class="posterFade">
<a class="appNativePlayBtn"></a>
<div class="btmBrdr">
<div class="btmBrdrInner"></div>
</div>
</div>
</div>';
return cl
}


Obviously, save your changes to both files and upload them to your server, then test it on an iPhone/iPad. I've only tested on iPhone so far, so let me know if there is any trouble on the iPad (it should only be a positioning issue if there is).
Photo of Dave O'Rourke

Dave O'Rourke, Senior Software Engineer

  • 1460 Posts
  • 435 Reply Likes
Andrew,

I'm glad you found a workaround. I'm sorry it was such a hassle for you to get the look you wanted.

I thought it might be helpful to explain why that screen is there, and what the TechSmith Smart Player app is intended for...

First of all, we're not trying to trick anyone. The TechSmith Smart Player app is free, and the start screen has the familiar "Available in the app store" logo. The reason the app exists is that the iPhone always attempts to play videos in the native iPhone video player. The native player on the iPhone does not support any of our interactive features: hotspots, table of contents, and quizzing. We thought users might want those things to work on the iPhone, so we built an app for that, and that's what the TechSmith Smart Player app for the iPhone does. In short, it gives people on an iPhone a richer experience than can be delivered with the native player on the iPhone.

On the iPad, the browser is HTML5 capable, and the hardware can decode an MP4 natively. So an app is not required, and this start screen (with the link to the app store) does not appear on the iPad.

With your changes, you've made it so any interactive features of your video will not work when viewed from the iPhone, which is what the app delivers. If that's what you're trying to accomplish, that's fine. I just thought you should be aware of what you're losing with these changes.

Hope this helps.
Photo of Andrew

Andrew

  • 5 Posts
  • 0 Reply Likes
Hi Dave,

Thanks for getting back to me so quickly. I appreciate your reply and definitely understand what you guys are trying to accomplish from the interactivity perspective (I work for a software company that builds mobile apps for iPhone, iPad, Android, etc).

Perhaps you can pass this on to the engineers, as it's really a matter of usability... if the video doesn't contain any interactive features it still puts the overlay on the screen. When a user clicks thinking they will begin viewing the video, instead they get taken to the app store (because the app link is made to look like a play button). In those cases where there are no interactive features it would be nice from a user perspective to either not enable that overlay or provide the option to disable it.

Also, I tested the videos on a Google Nexus 7 tablet (which uses the Chrome browser) and the player doesn't work correctly (neither the default player or as I modified it)... but using a standard video tag (html 5) does work. Since there are so many Android devices, its definitely tough for engineering to test against all of them (we have that problem here too), so perhaps you can pass that info on to engineering as well.

Thanks again!
Photo of bobspryn

bobspryn

  • 2 Posts
  • 0 Reply Likes
We need a way to disable this for sure. This really isn't acceptable and will force us to move away from screencast.com entirely, which would be a shame.
Photo of joshmkim

joshmkim

  • 1 Post
  • 1 Reply Like
Hi...I just reported this to Support. What I'm seeing with Relay is that the volume does not work at all from the "Smart Player".....I would definitely want this disabled because with Relay we don't have any hotspots or anything like that.....and this is just frustrating (even if the volume worked).
Photo of Eugene W

Eugene W

  • 1 Post
  • 0 Reply Likes
This prevented me from purchasing your software. I just need simple videos without any features, and there should be a checkbox on production to allow us to skip the player download on iphone.
Photo of bobspryn

bobspryn

  • 2 Posts
  • 0 Reply Likes
Any progress on this? We're about to move to a different service if the 'smart player' download is forced. It makes no sense when the majority of videos don't have interactivity and are easily playable with the mp4 on mobile. It should only prompt if interactive features are present, and even then still allow a non-interactive version to be played.
Photo of john

john

  • 124 Posts
  • 6 Reply Likes
This reply was created from a merged topic originally titled
smart player embedded on website.


I have just discovered that I can embed the smart player video on my own website (instead of using the blank HTML file) by uploading the files to my server and then pasting the "player.html" url on any web page in my site.  The code looks like this:

 <iframe style="margin-right: auto; margin-left:
auto; display: block;" src="http://www.website.com /media/tutorial#1/tutorial#1_player.html"
height="360" width="640" allowfullscreen="yes"
frameborder="0" scrolling="no"></iframe>

Everything was going fine until I tried to watch one of these videos on my iPhone.  There is just a black box.  On Android devices the video appears but does not play.  Could be a bandwidth issue though.

Am I embedding my videos incorrectly or is there something I can add to my code so that these videos will work with iOS devices?






Photo of Andrew

Andrew

  • 5 Posts
  • 0 Reply Likes
Even simpler work-around than what I posted above:  DO NOT USE THEIR PLAYER AT ALL (sorry I didn't come back and post this sooner).  Rather than use their player, just use VIDEO-JS (video-js.com I think, just Google it)....  its free, works on all devices, plays videos in both HTML-5 and flash (intelligently chooses which to use).  I've been using it ever since this problem originally came up and have been very happy with it.

It requires a very slight amount of HTML understanding (but if you are on this page, you probably know enough HTML to use it)
Photo of john

john

  • 124 Posts
  • 6 Reply Likes
That's a good work around.  Both options.  I am just tired of manipulating all the files.  I would have to change about 30 videos on my server.

I will just wait until Camtasia fixes this. 

My 2¢:

The big play button on the video = plays the video (interactive features lost)
A 'little' link with a "little note"  that says "Hey, you're missing out on some cool interactivity with these videos!  Get the Smartplayer app here!"

I'd rather the stripped video just play rather than the clients be taken to the app store and just close the page because they don't want to be bothered downloading an app to play a video.  (Cause that's what I do)  Or they forgot their apple id or something.

I understand they are trying to work with Apple's "limitations", but Camtasia has always come through for their customers.  I have faith.

Besides, these videos work with all other devices:  PC/MAC, Android, and iPads.


Photo of Fraser Stowe

Fraser Stowe

  • 1 Post
  • 0 Reply Likes
Also, worth noting that in iOS 9 and up, you end up in an endless loop that keeps sending you to get the app, but won't ever play the video. We did hours and hours of work to figure out how to get Closed Captioning of videos to work on apple devices and then the new OS breaks it! Thousands of dollars for captioning, and hours of rendering time. Then a brand new obstacle for those with disabilities who just want a little bit of universal access. I blame Apple. Sends the message: "yeah, we don't care what we break--cuz look! see the different colors in the new OS?!"

Anyone have a workaround that keeps the captioning?
Photo of john

john

  • 124 Posts
  • 6 Reply Likes
Apparently the complaints here fell on deaf ears. All I wanted was an option to just play the video on all devices without having to download an app. At least for videos that dont use hotspots, toc, or menus. In my opinion its a huge limitation and i knock Some stars off techsmith. I dont use it as much. And when i do use it, its straight to youtube.
(Edited)
Photo of Michael Henley

Michael Henley, Software Engineer

  • 17 Posts
  • 4 Reply Likes
I recommend opening a support ticket and requesting a more recent version of smart player. The iOS 9 loop problem has been fixed, among other bugs.  The support website can be found at https://support.techsmith.com.

Also, the iOS app is no longer required for videos that do not have extra interaction such as hotspots or quizzing. Do you have an online example of a video where this is still not the case John?
(Edited)
Photo of Frances Arlene Roebuck Rampey

Frances Arlene Roebuck Rampey

  • 1 Post
  • 0 Reply Likes
I have an example where it is and the only feature we are using is closed captioning.
Photo of Michael Henley

Michael Henley, Software Engineer

  • 17 Posts
  • 4 Reply Likes
Closed captioning is unfortunately a feature that requires smart player. I believe it was originally implemented a few years before html5 and browser support for captioning existed. I understand eventually we want to switch over to standardized captions, however there is a bit of work that must occur in other systems first to accomplish that.
Photo of Hilly

Hilly

  • 1 Post
  • 0 Reply Likes
It would be great to see the smart player requirement removed for iOS videos with captions but retain WCAG compliance and player flexibility.  YouTube and various other HTML5 players now run nicely on small screen iOS devices with captions enabled. We definitely have demand from clients to have that feature fro content produced from Camtasia, and they often cite YouTube as an example that it can be done (and subsequently we have demand to put content directly there rather than using the Camtasia output on other hosted locations).
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 421 Posts
  • 152 Reply Likes
Official Response
Videos produced with Camtasia 9 for Windows and Camtasia 3 for macOS will now playback inline with Safari on iOS.  The only requirement is your device must be running iOS 10 or higher.  For devices running iOS 9 will still require the TechSmith Smart Player iOS app.
Photo of lisa.lederer

lisa.lederer

  • 1 Post
  • 0 Reply Likes
Is this why my video, produced in Camtasia 8.6, does not work from an iPhone, but works on an iPad?
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 421 Posts
  • 152 Reply Likes
Hi Lisa,

You are correct. The iPad has supported inline playback for many years now.  Let me know if you have any other questions.

Thanks,
Ben
Photo of john

john

  • 124 Posts
  • 6 Reply Likes
About a year too late on this. Too bad. I no longer use the smart player