I have created a react component, within which I've embedded the HTML video tag. The video source is supplied from the local. The video works fine in windows, android, but not in iOS devices.
render() {
return (
<>
<div className={`${styles.slideItem}`}>
<video ref={this.props.videoElements[this.props.index]} id="video" playsInline className={`video ${styles.slideImage}`}>
<source src={this.props.videoHref} type="video/mp4"></source>
</video>
</div>
</>
)}
I've tried adding default attributes of video tag. Even the playsInline doesn't work as expected
I've tried adding the video URL directly to the code, but it doesn't work as expected.
What am I missing? Is this because of the video format?
Thanks in advance for any help!
Related
I have an issue connected with playing video at IOS, I have a video tag created with React, like this.
<div className="video-component-wrapper" >
<video
id="video"
autoPlay
muted
loop
src="someSrc.mp4"
// type="video/mp4"
playsInline
preload="metadata"
>
Your browser does not support the video tag.
</video>
<div
className="sound-control-wrapper"
onClick={() => toggleMuted()}
>
<div>{isMuted ? "unmute" : "mute"}</div>
</div>
</div>
I am getting such a view on IOS
enter image description here
I have the following code in my razor view which outputs the source tag:
#Html.Raw("<source src=\"" + #mediaItem.Url + "\" type=\"" + #mediaType +"\">")
It is looped x number of times depending on the presence of multiple file formats.
The issue being that the output returned is as following.
<video><source src="x.mp4" type="video/mp4"><source src="x.webm" type="video/webm"></source></source></video>
Which gives me an w3 validator error on stray end tags for
I have no idea where or when the tags are being closed or why.
Any ideas on how to stop it from closing the tags?
A bit more of the code, updated the source part to not use Html.Raw per suggestion, but still generates the same issue.
<video id="frontCoverVideo" width="1920" height="450" playsinline autoplay loop muted controls>
#foreach (var mediaItem in coverMedia)
{
<source src="#mediaItem.Url" type="#mediaItem.Type">
}
</video>
Why are you using Html.Raw in this case? It's not recommended to use it that way. I don't see any reason.
Assuming the Video Sources are a List<VideoSource> in your ViewModel.
<video>
#foreach(var source in Model.VideoSources)
{
<source src="#source.Url" type="#source.MediaType" />
}
</video>
Any reason for not doing it the standard way?
UPDATE: Changed Code, added self-closing Source Tag to maybe fix issues lying within Umbraco
So here is the point. I have some files downloaded on my device. Because can be video,mp3 or pdf, it can be nice to display it on a webview so its preview system will do the work for me, and I have no necessity to download any external media player.
I have this code
let's assume that this path:
const path = 'file:///Users/MyUser/Library/Developer/CoreSimulator/Devices/D18AD5B6-22D1-4F57-A162-8A1C5DBCAD7A/data/Containers/Data/Application/BF9347EB-8EDF-45CB-9CFD-08C0C8BE3D5C/Documents/song.mp3';
<WebView
javaScriptEnabled
source={{ uri: path }}
style={{ marginTop: 0 }}
/>
My problem is when I'm trying to load the file, it always raise this error:
I suspect it's about the route of the uri. With require It renders an error as well ( module cannot be resolved).
This app is just for Ios, not Android.
Any help will be really appreciate!
Thanks in advance
I got it!!!
It was rough but finally, I get it.
I did it with a webview finally. What I did:
<WebView source={{ html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>` }} />
With this one, thanks to #marx_tseng I injected HTML on the webview, so I took advantage of the media player from the browser.
I had to load the video/image/mp3 from the bundle.js.It is loading previous when you invoke a webview. In this example, I use RNFetchBlob just to point to the folder that my documents are stored inside my device.
const html = `<script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,</Webview>
Finally, this is the code result:
const html = `<script
src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,
html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>`
}}
/>
Here #plougsgaard Provided with this solution.
https://github.com/wkh237/react-native-fetch-blob/issues/197
I hope that this answer can help if someone is stuck in the same situation.
Cheers!
You cannot play video in webview. please use npm packages like react-native-video it will help you to play videos with more controls
this maybe help you, using html video/audio tag
I am building cross platform application based on PhoneGap.
I am testing this app on iPad, I am using AngularJS.
I have created a list of media files using ng-repeat as below:
<div ng-repeat="media in mediaArray" style="width:200px; height:200px;">
<img ng-src="{{media.imgSrc}}"
ng-hide="media.isVideo"
style="width:200px; height:200px;"
>
<video id="video{{media.id}"
ng-show="media.isVideo"
postersrc="test.png"
poster-src <!-- Directive for poster source fix -->
controls
style="width:200px; height:200px;"
>
<source type="video/mp4"
videosrc="{{media.videoUrl}}"
video-src <!-- Directive for video source fix -->
>
Your browser does not support HTML5 video.
</video>
</div>
In my list I have images and video files.
I am able to see the list and also able to play the video files.
But problem is that, When I play any of the video then I am not able to scroll the list, scrolling works till I don't play any video once video is played scrolling does not work at all. what can be the issue?
Try this
<div ng-repeat="media in mediaArray" ng-controller="ScrollController" style="width:200px; height:200px;">
<img ng-src="{{media.imgSrc}}"
ng-hide="media.isVideo"
style="width:200px; height:200px;"
>
<video id="video{{media.id}"
ng-show="media.isVideo"
postersrc="test.png"
poster-src <!-- Directive for poster source fix -->
controls
style="width:200px; height:200px;"
>
<source type="video/mp4"
videosrc="{{media.videoUrl}}"
video-src <!-- Directive for video source fix -->
>
Your browser does not support HTML5 video.
</video>
</div>
Script for controller
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
I am working on a web application and I have one compatibility problem with Apple devices & Safari on PCs.
Html5 audio tag:
<audio controls>
<source src="/audio/en/file.mp3" type="audio/mpeg">
<source src="/audio/en/file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
I just want to play an audio file with basic controls.
The previous code works perfectly on Chrome, Opera, Firefox (Windows & Android devices).
But controlers do no appear with Safari (tested with the latest version on PC, iPad & iPad mini).
Audio player have a grey background with only "play/pause" function.
Here is a screenshot that describes my problem :
Thanks.
I had exactly the same problem.
My solution: I added the full URL for the audiofile source. Don't know why but it makes a difference. Here's my full code. The CSS modifications are only to hide the download button. But when I take it out I don't see the timeline. Very strange but exactly this code works for me.
<!DOCTYPE html>
<html>
<head>
<title>html5 audio player on iPhone</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-internal-media-controls-download-button {
display:none;
}
audio::-webkit-media-controls-enclosure {
overflow:hidden;
}
audio::-webkit-media-controls-panel {
width: calc(100% + 33px);
}
</style>
</head>
<body>
<audio controls preload="auto" style="width:100%;">
<source src="https://example.com/audio/audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br />
</body>
</html>
It seems the actual "fix" was really simple for me - all I needed is to make sure <audio> tag has enough width to show all the controls.
See screenshot below
Upper version
<audio controls preload="auto" style="width:100%;" >
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
Bottom Version
<audio controls preload="auto">
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
It may sound odd, but check that your HTML page has a as the first line.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page's code follows...
Safari is known to not render HTML-5 content without the proper DOCTYPE.
More Info:
http://www.wimpyplayer.com/docs/common/doctype.html
Searched for too long for this simple answer after it was working on Andriod, and I finally tested on iOS, this works if you're using ionic
import {normalizeURL} from 'ionic-angular';
MediaSource = document.createElement("audio");
MediaSource.src = normalizeURL(cordova.file.dataDirectory + file.fullPath);
Hope this helps.
same here with amp-audio
this css (sass actually) fix the problem
amp-audio {
[class*="amphtml-fill-content"] {
width: 100%;
}
}