Displaying the video in the TinyMCE editor - javascript

Good afternoon, I will explain the problem in details. I'm connecting the TinyMCE editor version 4.6.4 to my site. It has plugins in the Media plugin through which you can insert media files into the editor.
Thus, I add video to the editor. Actually, you can add a video in different ways, and one of them is to give the editor a direct link, and I do so.
There is a parameter media_live_embeds in the initialization of the editor, which can be inserted into the position true or false, and if the parameter is inserted into true, then, the added video can be played directly in the editor.
The problem is that if I give a link to a video from my site (vvv.mp4 example), then, it does not play (as if the parameter is inserted in media_live_embeds: false).
But if for example I add a video link from youtube (example https://www.youtube.com/watch?v=q6_yRWPd4Yc) then it works.
Here on the screen there are 2 videos, the first one with youtube link, and the second with a link from the site, the first one is played directly from the editor, and the second one is not.
What's my mistake? Who had this problem?
Here is the editor, you can test yourself.

The name of the property is media_live_embeds so this will permit to played directly in the editor embeds media. When you insert a video URL, tinyMce construct embed video code integration :
<iframe width="560" height="315" src="https://www.youtube.com/embed/LIMYj5mpMM4" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
But when you insert a video from your website without create a url access to content video or from local files, tinyMce will create a html element : <video><video>. So you couldn't play it in the editor since it wasn't and embeds media url.

Related

auto-detect and auto-embed youtube videos. PHP or Javascript?

I run a 4chan style imageboard. When users post youtube or soundcloud links, I would like for the board to give a second link which, when clicked, would embed the video.
If I am not mistaken, 4chan uses JS to accomplish this. I have also seen many forum admins using php to do this. I know that wordpress uses php to do this.
If I went with php, I was thinking of going with something based on this:
https://www.warpconduit.net/2013/04/13/automatically-embedding-video-using-only-the-url-with-the-help-of-oembed/
For JS I am not entirely sure how to go about it. I would probably use a regex to detect youtube urls and then convert that information to an embed
You don't need RegEx, PHP or oEmbed to do this. Both sites allow iFrame embeds. So when a user gives a link just add the iframe embedding part yourself (around their link) and output that as part of the user's post.
Use String functions like indexOf to see if the link contains the word "soundcloud" or "youtube" then adjust user's given link to correct format for the iframe embedding.
Some examples:
Youtube : format = youtube.com/embed/ + User Link
User puts https://www.youtube.com/watch?v=KKE0Py64jmk so your code makes it as...
<iframe width="500" height="300"
src="https://www.youtube.com/embed/KKE0Py64jmk">
</iframe>
SoundCloud : format = w.soundcloud.com/player/?url= + User Link
User puts https://soundcloud.com/thenextmen/sofa-feat-pupajim then your code changes it to...
<iframe width="500" height="300"
src="https://w.soundcloud.com/player/?url=https://soundcloud.com/thenextmen/sofa-feat-pupajim">
</iframe>

Is it possible to only remove the "watch later" and "share" buttons from youtube iframe embed player

How can I remove the watch later and share buttons from youtube iframe embed player. Using the following embed code for embedding video clips.
<iframe width="854" height="480" src="https://www.youtube.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>
Using showinfo=0 removes the full Header which also contains the Video Title.
Is it possible to only remove "Watch Later" and "Share" buttons from the header?
Using YouTube embed's privacy-enhanced mode (youtube-nocookie), it will hide "Watch later" button, but not "Share" button.
<iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>
This parameter is deprecated and will be ignored after September 25, 2018.
As an example, this is what you're trying to do:
document.getElementsByTagName('iframe')[0].contentWindow.getElementsByClassName('ytp-watch-later-button')[0].style.display = 'none';
But, short answer, there is no simple way to do this, because YouTube is on a different domain:
'Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine...'
https://stackoverflow.com/a/30545122/2488877
Though, you might find an answer suitable to your needs if you're tech-savvy in the answers to the question above.
I don't think it is possible with the iframe method.
My reasons for thinking that is:
It is not an option listed on their parameters page
I found this thread where a member of their team said it was not possible at the time (2012), and they had no plans to add the ability.
You could probably achieve something similar by turning showinfo off, and using the other methods to grab the video title.
Add this line after link
https://www.youtube.com/embed/c5cHjtspa7M?mode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent
It will disable the share and watch later option
showinfo
Note: This parameter is deprecated and will be ignored after September 25, 2018.
Supported values are 0 and 1.
Setting the parameter's value to 0 causes the player to not display information like the video title and uploader before the video starts playing.
If the player is loading a playlist, and you explicitly set the parameter value to 1, then, upon loading, the player will also display thumbnail images for the videos in the playlist.
https://developers.google.com/youtube/player_parameters
In the url params put the params : showinfo=0.
Like this : https://www.youtube.com/embed/youidvideo?autoplay=1&rel=0&showinfo=0
It will remove share and watch later button!
Use a url query string ?controls=0 to control what is shown:
<iframe
src="https://www.youtube-nocookie.com/embed/j8xbAwurfgo?controls=0&rel=0&modestbranding=1&origin=https://key.bio"
frameborder="0"
allow="encrypted-media;"
allowfullscreen>
</iframe>
YouTube Player API Reference for iframe Embeds
https://developers.google.com/youtube/iframe_api_reference
Note: this only worked for me on Chrome, not Firefox! Took me a while to figure this out because I use FF for webdev

Embedding HTML5 video in Tumblr (dashboard and blog)

Bit curios about the possibility to embed a custom HTML5 video player into Tumblr.
How it works now is basically that you put in an URL or embed code to Youtube or any other service and it'll load up the video and show it in the dashboard feed and on your blog.
I just checked with Vimeo, and in that case it seems like it fetches a vimeo iframe with the video (I guess it's their embed code) and inject it into the DOM when the play button is pressed.
Would it be possible to mimic this behaviour with a custom iframe of my own? Make Tumblr accept my own embed code (iframe based) that leads to a HTMl5 video and also serve up a preview image before the video is actually played.
So when I'd input for example, www.mydomain.com/video1 it would recognize it as a video and have it behave like any other video service out there.
Or would it otherwise be possible to do via their API?
Just to clarify: I would not want to use the Tumblr HTML5 video player, but a player of my own chosing.
The Tumblr dashboard will only play video previews for Video Posts. Anything embed in a caption or body will not get the preview treatment.
AFAIK, the only way to get a custom video to have a preview would be for Tumblr to work with your own platform / API. Tumblr pulls in the preview thumbs when you make the Video Post, if they support the platform.
There is a list of tested video platforms / providers here: Video Posts with Auto Thumbnail(Like in Facebook) in Tumblr.com
OK
So on this tumblr the 3 posts along the top are ones I have tried.
http://nativecitizenstest.tumblr.com/
First is a Video type post but simply passing the url to tumblr.
Second is a text post but passing custom embed html from vine (this included a script which I did not know would work).
Third is a text post with an iframe in that I hand coded.
I think metcalf seems to be flash video and I don't know if that is supported, but a little googling should tell us.

Mute youtube video that has to be embedded via HTML iframe

Problem
I'm working with a site where the developer coded an embedded youtube video to change via a script altering the iframe's src tag.
I need to mute this element, and while I'm aware that a few libraries allow me to embed a video via script with the option of muting, I'm unaware of any way to use those methods without having to rescript everything that has been done on the youtube player. What's the best option here?
element
<iframe id="tv" width="100%" height="100%" src="http://www.youtube.com/embed/9NFUgVa68hw?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>
script
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
$(".mid-bar").text("TNT");
});
The above is just one module of the script; there are 22 channels.
Again, I'm trying to mute the embedded video without having to rescript the src changes. How can this be done?
I understand you don't wish to change the src, however, if you append enablejsapi=1 you can then use javascript to mute the video by calling object.mute()
Reference: https://developers.google.com/youtube/js_api_reference#Playback_controls

TinyMCE Moxie Player Media Splash Image?

Is there a way to get moxie player, which is packaged with TinyMCE, to display a splash image when you embed a video via the WYSIWYG tool? I've been Googling and playing with it for a while with no success at this point. I'm using TinyMCE 3.4.2 in production and have tried 3.4.3 in development, but it doesn't seem to work correctly. Honestly, I'm not even sure what the actual params are for this player since the documentation on the legal flashvars appears to be non existent. From what I can tell, the "poster" param should be what I need, but setting that when I embed the video object seems to do nothing. The only official documentation I've found so far is: http://tinymce.moxiecode.com/wiki.php/Plugin:media and that just gives the general params to pass into TinyMCE for the media plugin itself, not how to actually use the player.
Here is what I'm currently setting in the flashvars param tag
<param name="flashvars" value="url=http%3A//url/to/some.flv&poster=http%3A//url/to/some.jpg" />
Any ideas? I'd prefer to keep using the stock TinyMCE implementation if at all possible and this player, along with the WYSIWYG tool otherwise addresses the business issue perfectly for my company.
You can't do it with current version of moxieplayer.
swfdump (from Flex SDK) on moxiplayer.swf doesn't show any reference to the poster parameter, just the url one.
This is an open request feature. Just vote for it!
Currently you can only set a poster image using the HTML5 Video tag. You can validate this here by clicking the insert media button, selecting HTML5 video and assigning a poster image in the advanced tab.
After that just hit submit to see the resulting example and the corresponding HTML.

Categories