I have created a minimal PhoneGap app that has just this in the index.html:
<!-- ... -->
<body>
<video src="test.m4v" autoplay onerror="alert('Error')"></video>
</body>
In the PhoneGap.plist I have set MediaPlaybackRequiresUserAction to NO.
Yet I still cannot get the video to autoplay when the page loads. I have tried different ways of scripting it but to no avail.
Does anybody have a clue what I'm doing wrong?
Solved it. Turned out to be a bug in PhoneGap 1.3 which was fixed in version 1.4 released yesterday(!).
From the release notes:
Fixed CB-42 – MediaPlaybackRequiresUserAction can now be set to NO
AutoPlay attribute work in ios :
<video src="test.m4v" autoplay="autoplay"></video>
Given this line autoplay function
"autoplay" attribute will not work in iOS so you need to use JavaScript to get it to play.
Here is some sample code:
var video = document.getElementById('someVideoId');
video.play();
Related
I want to add a video in my github portfolio, I do it by using
(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.
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.
I use videoJS to play a video on a HTML5 webpage. Everything is working well on PC (even with Safari), but on iPad (iOS 5), even if the video is playing well, I've got a problem with the size of the video – it is very small, and I don't know how to make it bigger.
I have tried adding width and height attributes and changing the default width and height in video.js.
Plus, my video is supposed to be 408px width and 520px height, and on iPad it's wider than high and there a black on each side.
How can I resolve this problem?
EDiT
#Emil thank you for your time. There is some codes :
How i include the video on my HTML page :
<video id='videoDavi' class='video-js vjs-default-skin' autoplay='autoplay' width='408' height='520' style='z-index: 1;' data-setup='{}'>
<source src="#DOSSIER_SQUELETTE/video/bub_Intro.<?php echo $extension; ?>" type="<?php echo $type; ?>" />
</video>
The "$extension" and "$type" are meant to choose the right video for the right browser. I used to use the videoJS solution (<video> <source [..]/> <source [...] /> <source [...] /> </video>) but had to change in order to make i-dont-remember-what working.
I also included on my css :
video#videoDAVI_html5_api{ width: 408px; height: 520px; }
Because i saw throught a web inspector simulator that the code on the iPad was
<video id="videoDAVI_html5_api" autoplay src="video.mp4"></video>
(+ i forgot i'm also using easySlider 1.7)
Thanks
I finally had it work on iPad.
I had this code under the <video id="videoDavi"></video>
<script>
var homePlayer=_V_("videoDavi");
</script>
and had the video-js.css (it wasn't needed for the others, i still don't understand why iPad needs it)
Now it's not working at all on Android/Chrome, but working on Android/Firefox.. But I guess I'll find why, didn't have search yet.
Here is a script that appends the markup for an html5 video to the DOM:
document.body.innerHTML = '<video id="video" controls="controls" src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v" type="video/mp4"></video>';
var el = document.getElementById('video');
document.body.removeChild(el);
document.body.appendChild(el);
jsfiddle demo:
http://jsfiddle.net/h8RLS/2/
This works in all browsers tested, except for Safari on iOS. In iOS, when the HTMLVideoElement is re-appended to the DOM, it is no longer playable.
Has anyone else resolved or encountered this issue?
I don't have an iPad but could reproduce your issue on an iPhone. This seems to be a Webkit error but it can be bypassed easily by changing the src attribute of the video - I hope this is sufficient for your scenario. You can see a working demo here:
http://vidhtml5.appspot.com/jsembed.html
This is the code:
var el = document.getElementById('video');
el.src= "http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v";
el.load();
I had the same problem, and I found a workaround using a timer (I'm using jQuery here).
var v = $('#videoID');
v.appendTo( $('#toDivID') );
var timer = setInterval( function() {
clearInterval( timer );
v[0].load();
v[0].play();
}, 200 );
I've only tested it on the iPad2 on iOS 6.1.
You can include two 'source' tags for your video. I've done this on a site and it works great.
<video class="video" controls="controls" id="video1">
<source type="video/mp4" src="demo.mp4">
<source type="video/webm" src="demo.webm">
</video>
I was wondering whether anyone has tried to use the new tag that comes with HTML5 on the iPhone.
Specifically, I didn't manage to make the pause() command to work.
Below is a portion of the page. As you can see, I'm trying to pause the video 10sec after it started. It works on Safari on a Mac btw.
Has anyone managed to make this work?
<head>
<javascript language="JavaScript">
function timeUpdate()
{
var myVideo = document.getElementsByTagName('video')[0];
var time = myVideo.currentTime;
if (time > 10)
{
myVideo.pause();
}
}
function addListeners()
{
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('timeupdate',timeUpdate,false);
}
</script>
</head>
<body onload="addListeners()">
<video controls src="resources/bb_poor_cinderella_512kb.mp4"
poster="resources/background.png">
Video tag not supported!
</video>
</body>
Thanks,
Ariel
This code is invalid:
<javascript language="JavaScript">
There is no HTML tag called <Javascript>
To set the language to javascript, you should use this:
<script type="text/javascript">
// Code here
</script>
Note that the language attribute is deprecated according to the W3C standard (http://www.w3.org/TR/REC-html40/interact/scripts.html) so you should use type rather than language.
As far as i know iPhone wont let you play video inline in the mobile safari browser.
So pausing wont work ofcourse. iPhone open the video in an external videoplayer, you dont have control over browser features, so the pausing doenst work.
You should use <script>, not <javascript language="JavaScript">.