RTE + Video (flash <embed> or <video>) - typo3

I imported news from an old tt_news extension into the new tx_news extension.
Some of this news had a video in it with this code:
<embed quality="high" base="http://www.domain.com/" flashvars="width=480&height=320&file=http://www.domain.com/fileadmin/media/Videos/Video.mp4&autostart=false&image=http://www.domain.com/fileadmin/media/Videos/video.jpg&controlbar=over&fullscreen=true" allowscriptaccess="always" allowfullscreen="true" style="WIDTH: 480px; HEIGHT: 320px" type="application/x-shockwave-flash" src="http://www.domain.com/typo3conf/ext/flvplayer2/pi1/mediaplayer.swf" pluginspage="http://www.adobe.com/go/getflashplayer" height="320" width="480" title="Adobe Flash Player" />
When I watch at one of this news now, this code is outputted as text.
So I added the following typoscript to my templates setup.txt (and to test also to constants.txt and in the properties of the rootpage into the Ressources->Page TSConfig):
RTE.default.proc.allowTags := addToList(embed)
But it does not change anything. When I edit this news in the backend and put this code into the RTE-HTML-Mode and go back to the WYSIWYG-Mode I see the video until I save the news. Then its back as text. It changes < to < and so on.
I also tried to replace the embed flash video with a html5-video element. For that I added video to the allowed tags:
RTE.default.proc.allowTags := addToList(embed, video)
And added this html into the RTE-HTML-Mode.
<div class="video" id="videoXX">
<video controls="controls" poster="poster.jpg" width="auto" height="auto">
<!-- .mp4 file for native playback in IE9+, Firefox, Chrome, Safari and most mobile browsers -->
<source src="video.mp4" type="video/mp4" />
</video>
</div>
So I guess the typoscript is wrong (or on the wrong place?) but I can not figure out what would be the right typoscript to allow the embed and video tag.
Also, is it possible to not parse the RTE at all? What I put into the HTML-Mode is always what I want and I do not want that to get parsed at all.
If that is possible I think that would solve all my problems with RTE, if not can someone help me find the right typoscript and/or place to put that typoscript in?

I have a working example with iframe. I made the following settings (iframe is replaced with video to fit to your question):
in a PageTS:
RTE.default.proc.allowTagsOutside := addToList(video, source)
RTE.default.proc.allowTags := addToList(video, source)
and in a Setup TypoScript:
lib.parseFunc_RTE {
allowTags := addToList(video, source)
}

Related

Video in Github markdown not displaying in Chrome but works perfectly fine in Safari

I want to add a video in my github portfolio, I do it by using
![](/files/recording.mp4)
(The mp4 file is saved in files folder)
However, the video was not being displayed in Chrome/Edge, but works fine in Safari.
The I tried directly dragging the video into the markdown, it was showing in the preview mode, but would display only a link in all the browsers.
How should I fix this?
add this theme hugo-video
get the theme
git submodule add https://github.com/martignoni/hugo-video.git themes/hugo-video
edit config.yml
theme: ["hugo-video", "my-theme"]
use it
{{< video src="sample-video.mp4" >}}
OR
try this blog
its adding a shorthand video in hugo in layouts/shorthand/video.html
which makes use of JS video player library clappr to create a player given the URL of the video file
layouts/shorthand/video.html
<div class="container">
<div id="player-wrapper"></div>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/#clappr/player#latest/dist/clappr.min.js"
>
</script>
<script>
var playerElement = document.getElementById("player-wrapper");
var player = new Clappr.Player({
source: {{ .Get 0 }},
mute: true,
height: 360,
width: 640
});
player.attachTo(playerElement);
</script>
then in your post where you need the video you can do
this is my video
{{< video "video.mp4" "my-5" >}}
both get the task done in similar fashion! former uses a video html tag and is clean in my opinion, latter uses a JS library and feels like making a little bit of mess.
Because the Markdown specification varies from platform to platform, video support can be inconsistent. The simplest solution is to use an HTML video tag instead:
<video src='/files/recording.mp4' />
This has the added benefit of allowing you to set the styling with HTML/CSS.

Video play button misplaced under iOS 8

Somehow the html video tag seems to be buggy in iOS 8 (UIWebView). There is no way to focus the "play" button on the video image. It always looks like that:
If we run the exact same code in iOS 7.1, it looks like that:
The HTML we load into the UIWebView looks like that:
<html>
<body>
<video style="width:100px;height:100px;" controls="" poster="http://goo.gl/Rz0Tkv">
<source src="/tmp/2f4194b4-cabd-4c34-9f34-78561b8a900f.mp4" type="video/mp4" />
</video>
</body>
</html>
We found no way to resize that play-button. Height/Width in CSS, direct HTML, even put the whole video-tag into a div and style this had no effect.
It's also interesting that in iOS 8, the poster-tag is necessary for a video, otherwise there is no thumbnail (in iOS 7, there was by default a thumbnail of the video).
Looks to me like a bug, do you have an idea for a quick workaround? Besides opening a ticket at apple ofc...
Update
It seems to be the same problem for the iframe tag.

Prevent HTML5 video loading on iPhone

I'd like to load a video to play on desktops and tablets, but prevent it from loading on iPhones because it's just a graphical element.
Here's my code:
<video width="980" height="400" poster="/poster.jpg" autoplay loop>
<source src="/images/front.mp4" type="video/mp4">
<source src="/images/front.webm" type="video/webm">
Your browser does not support the video tag.
</video>
How can I tell iPhones to not load the video but just display the poster frame?
Thanks.
Something like this should work:
<script>
var videoElement = document.getElementsByTagName("video")[0];
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
videoElement.parentNode.removeChild(videoElement);
videoElement.pause();
}
</script>
This assumes you only have one video element on the page.
Also, be sure to put the JavaScript before the closing body element or put it in an external JavaScript file.

How to place interactive buttons on top of the HTML5 video tag?

When I place a link on top of the HTML5 Video Tag. This will work on Safari, desktop browser, but on iPad and iPhone I can't click on it what so ever. Does someone know a work around for this?
<div class="video-wrapper">
<video id="mainVideo" poster="resources/videos/poster.jpg" controls="controls">
<source src="resources/videos/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<a id="example" href="javascript:alert('ok')">Hello World</a>
</div>

What is the best approach to embed mp4 for the iPhone without using JavaScript?

I am trying to troubleshoot this code and am running into a dead-end, so I thought I would ask my first question here. I have three questions:
1) What is the best approach to embed an mp4 for an iPhone specific view, preferably without using Javascript?
2) Are there any preferred practices to debug code on an iPhone?
3) Can anyone tell me what is wrong with my specific code below? I should mention upfront that the variable $fileName does indeed contain the correct info, I've just omitted that portion of the code. Also, the poster image does flicker for a brief moment before I receive the greyed out, broken QuickTime image so that is an indication that this is partially working.
Code:
<object width="448" height="335" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="/libraries/images/$fileName.jpg" />
<param name="href" value="/libraries/media/$fileName.mp4" />
<param name="target" value="myself" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="scale" value="aspect" />
<embed src="/libraries/images/$fileName.jpg" href="/libraries/media/$fileName.mp4" type="video/mp4" target="myself" width="448" height="335" scale="aspect" controller="false" autoplay="false"> </embed>
</object>
You don't embed it, you link to it. Usually, the link is a thumbnail from the video itself. iPhones don't support embedding of movie files directly in a site.
Clicking the link will open Quicktime on the user's iPhone, then return them to the web page when they're done.
Even if embed works, a linked image is going to be easier to remember:
<img src="/libraries/images/$filename.jpg" width="448" height="335" />
Starting with OS 3.0 you can use the <VIDEO> tag
Despite a common misconception, you can use a second object tag instead of the embed tag, while changing the parameters to elements and using type="video/quicktime". The result will be the same on practically all browsers (I have yet to see a problem, although I am told IE6 screws it up), and the page will validate. The result on iPhone will be a little different than on desktop browsers. Unless you explicitly set a poster frame, it will use a black one. It will also put it's own play button on top of the poster frame. (if anyone knows how to disable either of those, I would love to know how) By doing this, you can do the whole thing without any Javascript at all. If you want to see an example, here one is: http://www.cdjunior.com/CD_JR/view.php?name=jehovahs_witnesses. The relevent part of the source is lines 94-100. I don't know if you can use an embed tag and make it work. Now that I think of it, I think this may be how the Apple Javascript does it.
Here's an implementation of what AlBeebe mentioned (HTML 5 video tag).
This will take an mp4 and embed it inside an iPhone frame without JS. However, you will probably run into resizing problems, so set a min-width: 758px; for your body.
Adjust with the video coordinates if things are misaligned.
HTML
<div id='photo'>
<div id='phone'>
<img src='img/phone-border.png'/>
<video src='img/cloud.mp4' autoplay loop width="209" height="370" poster="img/first-frame.png"/>
</div>
</div>
CSS
#phone {
position: relative;
}
#phone img {
width: 300px;
height: auto;
}
#phone video {
position: absolute;
width: 209px;
height: 370px;
top: 50%;
left: 50%;
margin-left: -182px;
margin-top: -185px;
}