I have been searching for a long time and have tried a lot of approaches but nothing seems to be working. I have a video tag which I want to be played when I tap over it. I am working on Ionic 3 and angular. The code is shown below. Please help me out or direct me if I missed anything.
HTML:
<video id="edit-video-element"
width="100%"
[src]="videoPath"
webkit-playsinline
poster="{{thumbnailPath}}" controls autobuffer >
</video>
.ts file
this.video = document.getElementsByTagName('video')[0];
onVideoClick(e) {
(this.video.paused) ? this.video.play() : this.video.pause();
}
Its not displaying any issues, but not working at all.
Update:
<video *ngIf="hasVideo" width="100%" controls autoplay>
<source [src]="videoPath" type="video/mp4">
</video>
I added this and then in the .ts file I have the videoPath as:
file:///private/var/mobile/Containers/Data/Application/99091302-995E-40C7-AF66-0E07BCF09220/tmp/trim.E4AE7B29-06BB-4077-A56A-B546A53267DC.MOV
Update:
I was able to make it work for the files from photo album
I had to install "DomSanitizer" and then add _DomSanitizationService.bypassSecurityTrustUrl(yourFilePath) in my video tag.
Try this out. It's working fine for me.
Html
<video #videoPlayer class="video-player" controls></video>
TS
#ViewChild('videoPlayer') mVideoPlayer: any;
ionViewDidLoad() {
let video = this.mVideoPlayer.nativeElement;
video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
video.play();
}
sass
.video-player {
width: 100%;
height: 100%;
}
Related
I'm trying to use a video I uploaded in googledrive, the link is an open acces to anyone as a viewer, in my HTML project but what I have back is an error. When i click on it it says i need to open it with an app, because they are 'analysing the video' since few hours.
https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing
In the HTML I put:
<video controls autoplay width="320" height="240">
<source src="https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing" type="video/mp4">
</video>
and it doesn't show nothing. In the console logs I got :
ERROR : GET https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing net::ERR_CONNECTION_TIMED_OUT
What am I doing wrong?
Try adding
Replace /file/d/ with /u/0/uc?id=
Replace ending /view?usp=sharing with &export=download
Input is:
https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing
Output for usage in <video> tag:
https://drive.google.com/u/0/uc?id=1vJgksW011ngQpyBV7xdrJid3X4cLFza_&export=download
Example code:
<!DOCTYPE html>
<html>
<body>
<video id="background-video" autoplay loop muted poster="./assets/clouds_HP.jpg">
<source src="https://drive.google.com/u/0/uc?id=1vJgksW011ngQpyBV7xdrJid3X4cLFza_&export=download" type="video/mp4">
</video>
</body>
<script>
var vid = document.getElementById("background-video");
vid.addEventListener('click', function(evt) { handle_Click (evt) } );
function handle_Click (evt)
{
//alert("clicked object ID is : " + evt.target.id);
vid.muted = false;
}
</script>
</html>
I want to make the video autoplay without any user gesture in reactjs. I know as per recent google and apple web video policy we cannot autoplay a video having audio without user gesture.But i have seen few websites which still autoplays the video across modern web browsers also.
I came across many questions related to this issue on stackoverflow but none helped me.
Here is what i have tried.
Try 1.
<video id="miniVideo" preLoad="yes" autoPlay="autoplay" loop width="100%" height="auto" playsInline>
<source src="/mini/video/cooper.mp4" type="video/mp4" />
<source src="/mini/video/cooper.webm" type="video/webm" />
</video>
Try 2.
<iframe playsInline id="miniVideo" src="/mini/video/cooper.mp4" width="100%"
height="400px"
allow="autoplay; fullscreen"></iframe>
Try 3.
Script:
componentDidMount(){
var videoTimer = document.getElementById("miniVideo");
videoTimer.play();
}
HTML:
<video id="miniVideo" width="100%" height="100%">
<source src="/video/cooper.mp4" type="video/mp4" />
<p>This browser does not support the video element.</p>
</video>
Your help will be well appreciated.Thanks
I am not sure about Safari but Chrome has changed the autoplay policy. Look here:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
In order to autoplay, add muted attributed to video tag.
For example:
import React, { Component } from 'react';
class Player extends Component {
constructor(props) {
super(props);
this.state = {
isVideoMuted: true
};
}
handleMuteState = () => {
this.setState(prevState => ({
isVideoMuted: !prevState.isVideoMuted
}));
}
render() {
return (
<div>
<video muted={this.state.isVideoMuted} src="./video.mp4" />
<button onClick={this.handleMuteState}>{this.state.isVideoMuted ? 'Unmute' : 'Mute'}</button >
</div>
);
}
}
export default Player;
I want to start playing a HTML video programmatically from TypeScript when the User clicks on the Video area itself.
This is my HTML code:
<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
<source src="{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>
This is my TypeScript code:
#ViewChild('videoPlayer') videoplayer: any;
toggleVideo(event: any) {
this.videoplayer.play();
}
The issue is that I get an error that says play() function is not defined/exists. What could be the mistake here?
Problem is you're trying to get a reference to video element using its id. You need to use template reference variable (#) instead:
<div class="video">
<video controls (click)="toggleVideo()" #videoPlayer>
<source src="{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>
Read more about template reference variable here.
Edit:
Also, in your toggleVideo(event: any) function, you need to get nativeElement and then call the play() function because you are accessing DOM element directly:
#ViewChild('videoPlayer') videoplayer: ElementRef;
toggleVideo(event: any) {
this.videoplayer.nativeElement.play();
}
Credits to #peeskillet for this one.
Others have already answered the basic question (you must use nativeElement). However, since nativeElement is of type any you should 'cast' it to a more specific element type (for the <video> tag this is HTMLVideoElement).
const video: HTMLVideoElement = this.videoElement.nativeElement;
video.play();
This then gives you intellisense for all the supported methods and properties.
And of course this is all just compile time - you're not converting anything and you'll still get an error if the element is not really a video.
Here's another way to set your videoPlayer variable to use HTMLVideoElement for type safety
videoPlayer: HTMLVideoElement;
#ViewChild('videoPlayer')
set mainVideoEl(el: ElementRef) {
this.videoPlayer = el.nativeElement;
}
toggleVideo(event: any) {
this.videoplayer.play();
}
This is my HTML code:
<video controls class="video" (play)="video()" autoplay #videoPlayer>
<source src="assets/video/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
This is my TS code:
#ViewChild('videoPlayer') videoplayer: ElementRef;
video() {
console.log('im Play!');
this.videoplayer?.nativeElement.play();
}
That's how I did it:
<video (click)="playVideo($event)">
<source src="video.mp4" type="video/mp4">
</video>
TS
playVideo(event) {
event.toElement.play()
}
I have a react application where i am using html5 video tag to show a cover video. It works on ipad, android and all the major browsers but on iphone it just shows a glimpse of a play button which if clicked shows a full page video.
class FrontPage extends React.Component{
constructor(props) {
super(props);
this.authorize = [''];
}
render() {
return (
<div>
<video controls="true" style={BGstyle} preload="yes" autoPlay muted loop width="100%" height="auto">
<source src="/images/film.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<Ladder/>
<SignUp/>
</div>
);
}
}
var BGstyle = {
position: "absolute",
zIndex:999,
right:0,
bottom:0,
minWidth:'100%',
width: 'auto',
backgroundSize:"cover"
}
export default FrontPage;
you can see it on www.viogto.dk
For iOS 10+
Try the playsinline attribute.
But in camel case for react :
<video playsInline>
Source - New video Policies for iOS
In iOS 8 and iOS 9
Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.
Source - https://stackoverflow.com/a/36348909/3337722
I am searching for the holy grail of a simple looping html5 video, I am currently using the following code which doesn't seem work
<video width="650" height="650" class="outer_shadow" autoplay="" ended="this.play()" loop>
<source src="/videos?video_id=ag1kZXZ-anQtd2luZG93cg4LEghUaW1lRGF0YRgNDA">
</video>
Can anyone could hilight why this code doesn't work/suggest their best work arround?
Surely you just need to set the loop attribute (see fiddle tested in Chrome):
<video id="myVideo" width="650" height="650" class="outer_shadow" autoplay loop>
<source src="http://content.bitsontherun.com/videos/nPripu9l-60830.mp4">
</video>
If firefox still doesn't like the loop attribute, try the following fix:
document.getElementById('myVideo').addEventListener('ended', function(){
this.currentTime = 0;
}, false);
Update:
Perhaps not as simple as you had hoped but, as a work around for the problem, it might be worth trying one of the many HTML5 video libraries such as video.js. If the problem persists you could, as a worst case, force the library to use Flash where supported (ie. desktop) and fall-back to HTML5 where it's not (as explained here).
Here is the fiddle with working example of HTML5 video player that loops several videos. Just add your URLs to src array...
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<video id="video" width="500" height="400" controls autoplay></video>
<script>
var src = [
"http://content.adfox.ru/131007/adfox/205544/865991_11.mp4",
"http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4"
];
var curSrc = 0;
$(function() {
$('#video').attr("src", src[curSrc % src.length]);
curSrc++;
var video = $('#video').get(0);
$('#video')
.on('loadedmetadata', function() {
video.currentTime=0.01;
video.play();
})
.on('ended', function() {
console.log('ended');
video.src = src[curSrc % src.length];
video.load();
curSrc++;
});
});
</script>