On my website, I have some OpenGraph metadata so I can customize the thumbnail, title, and description for when it is shared in social networks or messaging apps:
<meta property="og:title" content="Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://mypage.com" />
<meta property="og:image" content="http://mypage.com/path/to/thumb.png" />
<meta property="og:description" content="Description of my page" />
The other day, sending messages via Messages/iMessage on iOS, I found that some shared links (not from my site) play a muted video instead of an static image as a thumbnail (it seems to happen since iOS 10). Here is an example from an Amazon link:
Is there a way to specify that instead of using a static image as a thumbnail, the app should use a video? Either using OpenGraph tags or a different system. I tried using this, but it doesn't seem to work:
<meta property="og:video" content="http://mypage.com/path/to/video.mp4" />
Also, I haven't been able to replicate this effect in a messaging system different than iMessage (I tried with Google Chat, Skype, WhatsApp, GMail...) and I have only seen the videos when it's an Amazon link, but looking at the source code I don't see anything that indicates that a video should be taken or which one (there are several, iMessage picked the first one), and I haven't found related information online. Maybe it's something that only works between Apple and Amazon, I wonder if it's something that any site could use.
I was using the right tag (og:video), but the problem was the file size of the video.
According to Apple's "Best Practices for Link Previews in Messages" Technical Note, both og:video or twitter:player:stream would work to add a video preview to a message (emphasis mine):
Videos in link previews
Putting a direct link to your video asset in the Open Graph metadata is better than referencing an embeddable video page. With the direct link to video, Messages will load and display fast, and use the system user interface for video playback.
If the link preview machinery encounters a og:video or twitter:player:stream that points to a downloadable single media asset (for example, an MPEG-4 file) that can be played, it will attempt to download the video and automatically play it back.
Video that can be streamed but not downloaded (such as HTTP Live Streams or QuickTime Reference Movies) will still play inline, but require the user to tap to start playback. Video that requires embedding HTML or plug-ins will not play inline.
And at the bottom of the page, it is specified that there are some limits for the linked media, and in particular there is a limit of 1MB per resource that I was not following (emphasis mine):
Limits
All limits are subject to change at any point in time; use these only as guidelines.
Icons should be square, and at least 108px per side.
Images should be at least 900px in width.
Images less than 150px in width will not be used, or may be presented as icons.
The main resource located at the link is limited to 1MB. The total size of sub-resources (the icons, images, and videos which are selected as most interesting) is limited to 10MB.
Related
A YouTube video is not being played due to copyright issue and gives a message as follows:
This video contains content from somebody, who has blocked it from display on this website or application.
Watch on YouTube.
Here is the JSfiddle for two videos, where one video is being played but the other is not:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<iframe allowfullscreen="" allow="autoplay; fullscreen" src="https://www.youtube.com/embed/UPLNXZQdGxo?autoplay=1" frameborder="0"></iframe>
<br />
<iframe allowfullscreen="" allow="autoplay; fullscreen" src="https://www.youtube.com/embed/6jiNS_4CEug?autoplay=1" frameborder="0"></iframe>
</body>
</html>
Is there a way to support playing such videos?
Video isn't available in my country/region
Some YouTube videos may not
be available in your country/region for the following reasons:
Video owners have chosen to make their content available only to
certain countries/regions (usually due to licensing rights) YouTube
may block specific content to comply with local laws
-- Youtube
Basically this means that the video isn't playable in your region. While it may become available in the future, currently you cannot do anything about that.
For future reference, this online tool checks if a video is available in your region.
Hope this answered your question!
the link you provided works for me. (I'm in Germany)
I think it is best to test your solution with different localization since I'm guessing YouTube is blocking it for you specifically for you. There might be plenty of reasons besides localization like age restriction etc.
Uploading Video to a different platform might help
I've been asked to create an education ebook which contains 200 videos for a total size of 25 Go (!).
Although it is my first ebook creation, I can't imagine to embed so many videos in the epub file, and so, I plan to only use external videos.
Since the making of these videos requested a lot of work (and personnal funds), the teacher want to secure the videos and avoid the videos to be stolen and made publicly visible on other sites.
How can I include external videos in an epub ebook in a safe manner ?
Thanks in advance for any tips !
Short answer: there is no way to 100% "protect" a resource embedded in an EPUB file, if the user has access to the EPUB file itself.
Long answer: unless you are also creating the reading application intended to be used for consuming those EPUB files and thus you can prevent the user from "reaching" the actual EPUB file, there is no 100% secure way of preventing a user from extracting a resource (the video, in your case) from an EPUB file.
Traditionally, to prevent "oversharing" of the EPUB file itself or "unauthorized extraction" of some assets (images, audios, videos) two main techniques are used: DRM or per-purchase watermarking. If you apply a DRM (i.e., the Adobe DRM), there are programs to remove it with just a click. The per-user watermarking route seems difficult for videos, I do not think any watermark provider has a tool to insert hidden user info inside videos embedded in EPUB files.
Another possibility consists in NOT embedding the video inside the EPUB file, and just link to it or to declare it as a "remote resource" (see http://www.idpf.org/epub/301/spec/epub-publications.html#sec-resource-locations ). But again, this does not prevent a malicious user from downloading the video from the URL you need to specify in the EPUB file.
Probably the best solution consists in showing some information (like "(c) Name_of_the_author, 2016") in a corner of the video. Again, very determined pirates might crop that text off, but at least discourage the "casual oversharers".
As with every ePub response, this depends entirely on the distribution channels they require. If they plan to distribute the ePub files directly, and the ePub files are ePub3 / HTML5 compatible, I would suggest this:
host the videos on a site that provides custom domain-level-access to the videos (like Vimeo: https://help.vimeo.com/hc/en-us/articles/224817847-Privacy-settings-overview), then have the video live in an iFrame to your site and require users to authenticate to that iFrame before the videos will play.
This will prevent people from sharing the videos by simply copying and pasting a URL, which will give you client peace of mind. But there will ALWAYS be the possibility of an authenticated user downloading/saving the video and then re-posting it in a public place. But you will always have that possibility regardless of security: because someone can always do a screen record and audio capture for any video they can see.
Best of luck,
-Alex
I am trying to create Twitter cards using the twitter meta tags (and Open Graph for other sites like Facebook). When I see my twitter feed from others like say NPR News the cards are expanded by default.
However when I post the same content - the card is not expanded by default. I have to click on the tweet and the click on "Details" or "View Summary" which redirects me to a new page where the card is expanded.
What makes twitter decide weather to display the card (in my case Summary Large) expanded or collapsed?
Edit:
Here are the meta tags in use,
<meta property="og:title" content="**masked**"/>
<meta property="og:description" content="**masked**" />
<meta property="og:image" content="**masked**" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image:src" content="**masked**" />
<meta property='twitter:site' content='**masked**'/>
(I am currently not using twitter:title and twitter:description since those are being read by twitter from the OpenGraph equivalent tags used.)
Take a look at this discussion. This is the expected behavior of Twitter cards (sadly).
If you want to show it by default, the tweet has to be either promoted or the image has to be hosted on Twitter's site (if it's hosted on a third party website, it will not show by default).
Twitter is now auto-expanding cards in their android and ios apps. Still not on desktop and mobile web though.
aug wrote
If you want to show it by default, the tweet has to be either promoted or the image has to be hosted on Twitter's site
but that's not true. I have had cards that were expanded by default. They were standard Summary Cards, though, and not Summary Cards with Large Image. Maybe that's where Twitter makes a difference? The reasoning could be that the small image shown in a standard Summary Card takes less bandwidth and attention. This is speculative. Can anybody confirm?
First of all, please note that I searched for a SocialMediaStackExchange to ask this question on, but there doesn't seem to be one.
Here's what I'm wondering. When posting a tweet to twitter, if it is a youtube link or specific web site's link, then twitter will show an Expand functionality which the user can click to preview the media content right in the Twitter interface.
Does anyone know if this is determined by Twitter or if there is some way I can alter my web site to enable the preview on twitter?
I'd like to make it so when I tweet a blog entry that people can preview the first bit of contents of the article.
Here's an example: (simply adding the link, displays the preview content shown) In this case it is an article on InfoWorld.
There's a link on Twitter that explains Expanded Content, but not how to make it happen.
https://blog.twitter.com/2012/experience-more-with-expanded-tweets
You probably want to look at "Twitter Cards". They're really simple to set up. You add a few lines of code to your page's header, get your site validated (an automated process), and you're away.
Here, for example, is one of my tweets with "preview" content https://twitter.com/edent/status/516544061495193601
The extra HTML code is just:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="#edent">
<meta name="twitter:site" content="#edent">
<meta name="twitter:title" content="Tim Berners-Lee and the Freedom of The City">
<meta name="twitter:description" content="Last week, I had the privilege of being invited into the Guildhall to watch Tim Berners-Lee receive the Honorary Freedom of the City. I was one of a dozen bloggers and tweeters asked to live tweet th">
<meta name="twitter:image:src" content="https://shkspr.mobi/blog/wp-content/uploads/2014/09/TimBL-Least-Well-Dressed-435x375.jpg">
<meta name="twitter:image:width" content="280">
<meta name="twitter:image:height" content="150">
Different styles of cards have different sorts of previews - video, images, app installs, etc.
Also, I will point one important thing. For twitter:image meta its content parameter must be absolute path, not relative. Otherwise it will not work.
<meta name="twitter:image content="/resource/img.jpg"/> //will not work
<meta name="twitter:image content="https://yourdomain.com/resource/img.jpg"/> //will work
I have a collection of RSS feeds in my iOS app, and I need to get the main image to post alongside the title. The posts do not have any image or media:thumbnail elements to use. I have looked through all the elements that show up, and nothing else would give me an image or an image URL.
Is there any way to extract the main image of a page, or some other method, to get the thumbnail of the post?
Optimally, I would not want to have to load every single webpage to look at, because users on their data plan would not want that many pages loaded that they don't want to look at.
I am currently using KMXMLParser in my app.
Actually I think it's easy to look for Open Graph image in the page. Usually most of the news or blog sites follows open graph protocol. There will be a meta tag og:image in the meta data of the page. It's easy to fetch and analyse this metadata of the page rather than fetching the whole page and finding the big and small images.
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
For more info on Open graph Protocol refer http://ogp.me/
Please remember that this won't work for all sites but most of the popular sites. So for those sites that dosen't follow this you have to find another way.
You could search for image URL's and then choose one of them (first you find?).
Most apps do that. Also I guess that's how Facebook chooses a thumbnail image when you share a link.
Alternatively you could download the images and choose the biggest, etc. Probably not worth the effort unless you pre-load images anyway.