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>
Related
I have an little site with a video. Its a YouTube Video.
But if fancybox show up, the video it will not autostart.
Here is my code:
<section class="contact bg-primary" id="video">
<div class="container">
<h2>Videoteaser</h2>
<a data-fancybox data-width="640" data-small-btn="true" data-height="360" class="btn btn-outline2 btn-xl js-scroll-trigger"ata-small-btn="true" href="https://www.youtube.com/watch?v=MkCbpgUpkMo">Videoteaser</a>
</div>
</section>
To open up automatically I have this little JS on the bottom of the site:
$('[data-fancybox]').eq(0).trigger('click');
The Problem ist that the video do not autostart. No matter if I click on the button or if I use the little JS to autoopen the fancybox.
Only after klicken the Play-Button the Video do start.
How can I make ist autostart?
You are using Chrome, right? Then the answer is simple - it will not start due to Autoplay Policy Changes, see https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Other then that - it works fine https://codepen.io/anon/pen/pqyzEM?editors=1000
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)
}
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.
I have looked everywhere to an answer to this, and it is all very confusing.
I can not get my videos to play on either an ipad or iphone.
They play on other devices including androids/desktops. I have converted them many times using Miro video converter and handbrake, I have tried reducing the file size. I have tried removing the poster tags. I have come to the conclusion there must be something wrong with my html, which look like this:
<div id="blackbox_2" style="display: none">
<video title="BlackBox Sessions Part 2" class="video" preload="auto" controls>
<source src="videos/BlackBoxPt.2 copy.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="videos/BlackBoxPt.2.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="videos/BlackBoxPt.2.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object width="640" height="360" type="application/x-shockwave-flash"
data="flowplayer-5">
<param name="movie" value="flowplayer-5" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://kimcolemanprojects.com/videos/BlackBoxPt.2.appleuniversal.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>
</video> </div>
This html I got from dive into html. On the iPad/iphone you can see the video play button in the middle, however when you click on it nothing happens.
The page with the videos is here http://kimcolemanprojects.com/video-lighting.html
I have several videos on this page that are display in a fancy box.
If anybody can help guide me in the right direction I would be very grateful, this problem I'am finding very irritating.
Thanks
Angela
I decided the easiest option to this problem was to stream all my videos through youtube and vimeo. That way they work on everything.
I created xcode universal project, I am trying to load HTML5 page in UIWebView the
problem is i cant see any control to play movie, and i am getting blank screen on the video
place, in ipad and iphone simulator,
my .html file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport"
content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type"
content="text/html; charset=utf-8">
<title>Web App Demo</title>
</head>
<body>
<h1>Video Test</h1>
<p>This is a video test.</p>
<video width="320" height="240" controls= "controls">
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" type="video/mp4"/>
browser not supports the video
</video>
</br> <br/>
<h1>This is Audio </h1>
<b>Testing Audio </b>
<audio controls="controls">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg"/>
browser not supporting audio
</audio>
</body>
</html>
Any help why its not playing in simulator.
Thanks in advance.
I have seen this before when there are url issues -- like capitalization... The simulator is more relaxed than the device... Check the exact file names...
Sounds like it might be a pathing issue. You are using relative pathnames for the video, so they need to be in the place the HTML expects them to be in order to find them. You'll need to either use absolute pathnames to the files in your bundle OR make sure that the base href is defined to point to the appropriate folder holding those images, either explicitly in the HTML or by specifying the correct baseref in the loadHTMLString:baseURL: call.
One way to quickly test whether this is a problem would be to put a .png next to the video files and reference it in the HTML, too. If the .png doesn't show up, it's not a video problem so much as a problem finding assets.
i read that the mp4 file should be placed before the ogv file for the iPad to play it.
I am playing an m4v file in my uiwebview, but the translucent 'play' button does not appear in my simulator. It does work on the device itself, though....
<video id="VideoDiv" preload src="http://www.movietime.com/movie.m4v" controls width="480px" height="270" poster="poster.png"></video>