How to create an autoplay mute video?

Some French Dude

SomeFrenchDude
Messages
738
Reaction score
96
Hi,

I would like to reproduce this video behavior: https://o.copychief.com/offers/10-ways-cc-membership

I am not a technical guy (not a coder), but I was thinking: Why not use an animated GIF with no sound (since the muted beginning is only lopping for a few secs) of the video and then launch the actual video when the user press the PLAY button (how to control having the animated GIF and the actual video at the same place the, with the video replacing the GIF? How to make only the PLAY button clickable on the GIF?)

But it seems like there must be a simpler way.  Any idea?
May be there is a way using HTML 5 which I am not aware of (I only know basic HTML tags) but this is something I would like to do on my MD blog.

Thanks

 

Alex

MD developer
Messages
4,959
Reaction score
1,176
I certainly see the possibility to make this happen with an HTML5 player, iframe, or with a video player API like what Wistia offers (which is who hosts the video in the link, great service). Where are you hosting the video?

There's a great optimization feature I have been wanting to include in MD where it turns any video into an image with play button (which will be great for performance) and then turns into a video on play button click. To expand on that feature, play on scroll would make a great addition too! I know you hear this a lot, but this has been added to my todo list. :)

 
  • Like
Reactions: jjj

Some French Dude

SomeFrenchDude
Messages
738
Reaction score
96
Alex, more than optimizing the site loading time, my intent and need for this behavior has marketing reasons above all, to entice people playing the video. That's a psychological trigger.

So how can I do this in hosting my videos straight on Wordpress or on Googgle Drive? Is there not a trick or some code I can inject somewhere on the page? 

 

Alex

MD developer
Messages
4,959
Reaction score
1,176
Alex, more than optimizing the site loading time, my intent and need for this behavior has marketing reasons above all, to entice people playing the video. That's a psychological trigger.
Understood - I was explaining how I'd be able to combine the best of both worlds into a robust solution. :)

So how can I do this in hosting my videos straight on Wordpress or on Googgle Drive? Is there not a trick or some code I can inject somewhere on the page? 
It all comes down to the video player you use as all of them work differently. Never host/upload videos directly to your site, either use YouTube or Google Drive (if they offer an embed code).

nce the player you will use is established, it will be easier to come up with the code needed to do this, and also make your timed content a possibility too. If you can establish a player (either YouTube or Wistia in my opinion) I can find time to experiment with these features as I think many people around here could benefit from these capabilities.

 

Some French Dude

SomeFrenchDude
Messages
738
Reaction score
96
Never host/upload videos directly to your site, either use YouTube or Google Drive (if they offer an embed code).
Why not? Is this true for MP3 audio files too? 
So I should only upload my images on my Wordpress, right?

If you can establish a player (either YouTube or Wistia in my opinion) I can find time to experiment with these features as I think many people around here could benefit from these capabilities.
I won't forget and will let you know. Thanks.

 

Alex

MD developer
Messages
4,959
Reaction score
1,176
Why not? Is this true for MP3 audio files too? 
So I should only upload my images on my Wordpress, right?
Videos and audio files are huge files that require more resources to load and will eat up a lot of server space to play, and hosting that much can get expensive. That's why YouTube and other video services make big bucks, they offer the hosting!

The best way to self-host your own videos is to buy an affordable CDN service like MaxCDN to upload and host your videos videos (kind of like a web host but just for your videos) and then embed onto your website.

 

Some French Dude

SomeFrenchDude
Messages
738
Reaction score
96
either use YouTube or Google Drive (if they offer an embed code).

nce the player you will use is established, it will be easier to come up with the code needed to do this, and also make your timed content a possibility too.
Alex, I just tested. Google Drive does provide an embed code, looking like this for a "test file":

<iframe src="https://drive.google.com/file/d/1zcw7D9HZdS4zn3JIJJZbXE4fNCb0k-aL/preview" width="640" height="480"></iframe>


As you said, now my player is established, what is the "code needed to do this and also make my timed content a possibility"? Thx. [please, can you have a look at my private message, here, on MD Forums? Thx]

 

Alex

MD developer
Messages
4,959
Reaction score
1,176
I plugged this code in to my test site but it cannot be worked with. We need the direct audio file (.mp3 preferably) to use the <audio> tag with HTML5 to pull the timing from. The code you provided is an iframe that loads Google Drive's player, which is inaccessible.

 

Some French Dude

SomeFrenchDude
Messages
738
Reaction score
96
@Alex I am currently working on pitch for the final video to be recorded soon. It was just a test file. I think you:

  1. Can choose any video and or audio on your side,
  2. Place it on your Google drive and embed the link on your test site.
  3. Then you can test your code.
  4. I will be ready to replicate on my side when you tell it to me.
 

Alex

MD developer
Messages
4,959
Reaction score
1,176
My offer to do this was specific for when you are ready with the content, and from there I will plug the .mp3 file into the HTML5 audio tag and should be able to write a script to show text on certain times.

 

Some French Dude

SomeFrenchDude
Messages
738
Reaction score
96
TIME DELAYED CONTENT

I realize my request might not be perfectly clear. The text/link should on the page at a certain time (say for example after the video or audio has played for 3 min or so) but it should then stay displayed till the end of the video. It is not an ON and OFF and ON and OFF thing if you see  what I mean. Does it change things on your "offer"? 

The issue is that I am writing my script and will record it (voice over) while giving instructions that are dependent on the apparition of that time-coded link. Hence I need to be dead certain that this is feasible, otherwise, my whole process will be screwed and the recorded script won't make sense anymore. This is the whole point. Having that trigger. 

MUTED VIDEO

Now, it looks like two of my requests have merged here. I created a dedicated request regarding the TIME DELAYED CONTENT... 
@Alex my initial request here was to be able to do JUST THAT: https://o.copychief.com/offers/10-ways-cc-membership , that is, having the beginning of the video muted. Or having two videos with first one muted and serving as a "big virtual teaser and play button" to chain the actual video with the sound. How can we do that?

 

Some French Dude

SomeFrenchDude
Messages
738
Reaction score
96
Any chance to see the autoplay muted video as part of an MD feature? So powerful to capture people's attention and force them to want to hear what the video is about.
The same principle could be applied to audio with an audio wave moving while making no sound...

Thank you.
 
Top