I can play video files from a IIS web server to a client web app as long as they reside in the webroot directory on the server. I would like to play them from a shared directory not in the webroot, however. Is this possible??
Javascript function calling up video file, Videos is share name:
function loadAnotherVideo() {
var video = document.getElementById("video");
var source = document.getElementById("fileSelector");
var path = "//192.168.0.18/Videos/" + source.value;
alert(path);
video.src = path;
video.load();
video.play();
}
You should be able to do something like this, just make sure the App Pool has reading rights on the folder where the file is stored
File - video.aspx
private void Page_Load(object sender, System.EventArgs e)
{
//Set the appropriate ContentType.
Response.ContentType = "video/mp4";
//Get the physical path to the file.
string FilePath = "c:\path-to-video\video.mp4";
//Write the file directly to the HTTP content output stream.
Response.WriteFile(FilePath);
Response.End();
}
HTML
<video width="320" height="240" controls>
<source src="video.aspx" type="video/mp4">
Your browser does not support the video tag.
</video>
Based on a comment
Here is a post showing how to set/change a video source using javascript:
Changing source on html5 video tag
Related
i have avi file in local file directory
file:///storage/emulated/0/ionic_download/2022-02-07/18/18-59-32.avi
but the problem is that I want to play video with above file path.
data[i].toURL() is above file path
html
<video controls autoplay width="{{top_box_width}}" height="{{top_box_height}}">
<source [src]="play_path" type="video/mp4">
</video>
.ts
let myURL = normalizeURL(data[i].toURL() ) + "#t=0.1";
console.log("222"+myURL);
this.play_path = this.sanitizer.bypassSecurityTrustResourceUrl(data[i].toURL());
console.log('Cccccontent path cahnged ', this.play_path);
this.dismiss_loading();
both myURL and play_path is not playing video…
how can I play video?
thank you
chorme://inspect result is
what is really weird for me is that with fileopener.open
it works. so file path is not wrong or not found
this.fileOpener.open("file:///storage/emulated/0/ionic_download/2022-02-07/18/18-59-32.avi", 'video/mp4')
.then(() => console.log('File is opened'))
.catch(e => {
console.log('Error opening file', e);
if(e.message == "File not found"){
alert("파일이 없습니다.");
this.localstorage_remove(file_name);
}
});
AFAIK you should not define savePath inside functions. Your html code cannot even find the variable savePath because its being defined and initialized much later after the whole HTML has been rendered.
Define your savePath variable as global then initialize it inside your function using this.savePath. Your code should work.
I like to use JSFiddle when designing a new interface because I find it convenient for various tools within. I'm working on the front end of a site where I want to use a video, and unlike an image, I cant just throw it up on imgur and link to it for free instant hosting while I fiddle with the interface design.
So I want to know if I can somehow use a local file on my PC as the source for an HTML video element hosted on a live site. Obviously this is trivial to do with a web project being worked on on my Desktop, but I'm not sure it can be done on a live test.
For example this would work on a page I open from my desktop, living on my PC:
<video id="Video-Player">
<source src="../movie.mp4" type="video/mp4"/>
</video>
But I don't know whether I can do the equivalent with a page living on the web.
Here's how to allow a user to select an image from their local machine. This should get you started in the right direction.
Add a file input button in the HTML
<input type="file" id="file-btn"/>
and the corresponding handler
document.getElementById('file-btn').addEventListener('change', function(e){
readFiles(e.target.files);
})
Then the code to read the files
function readFiles(files){
files = [].slice.call(files); //turning files into a normal array
for (var file of files){
var reader = new FileReader();
reader.onload = createOnLoadHandler(file);
//there are also reader.onerror reader.onloadstart, reader.onprogress, and reader.onloadend handlers
reader.readAsDataURL(file);
}
}
Now, I've only done this with images, but this is how I read the image data.
function createOnLoadHandler(file){
console.log('reading ' + file.name + ' of type ' + file.type)
function onLoad(e){
var data = e.target.result
display(data);
}
return onLoad
}
function display(data){
var img = document.createElement('img');
img.src = data;
var context = canvas.getContext('2d')
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(img, 0, 0, WIDTH, HEIGHT);
}
Here is a demo of the above code.
As a side note, if you try to read images from another domain you'll run into cross origin policy issues. I would think the same problem exists for videos as well.
Trying to get the hooks for the audio tag events in the HTML5 through QtWeKit. For that I created a sample application that just loads a html file through QwebView.
The html file contains a HTML5 audio tag.
<audio id="audio_with_local_controls" controls>
<source src="nokia-tune.mp3" type="audio/mp3" />
</audio>
In the script side, I'm trying to get the hooks for the audio tag play, pause and ended events.
/// AUDIO TAG EVENTS.
var aid = document.getElementById('audio_with_local_controls');
function onplay_(){
console.log('onplay');
alert('onplay');
}
function oncanplay_(){
console.log('oncanplay');
alert('oncanplay');
}
function onpause_(){
console.log('onpause');
alert('onpause');
}
console.log(aid);
aid.onplay = onplay_;
aid.oncanplay = oncanplay_;
aid.onpause = onpause_;
aid.onprogress = function onprogress_(){ alert('onprogress'); }
aid.onended = function onended_(){ alert('onended'); }
aid.onabort = function onabort_(){ alert('onabort'); }
The code sequence might not make sense as I was trying something up and down in the code.
Chrome was able to capture the hooks. But QWebView remains silent on this, nothing gets captured.
Is it that QWebView doesn't support this? or Am I writing something wrong?
I'm trying to play mp4 video in webView using HTML5 in android but unfortunately it's not working, So can anyone help me, how can i do it ?
Here is my code
HTML file with name new2.html
<video width="365" height="200" src="/sdcard/Download/video.mp4" controls autobuffer></video>
<!--<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls autoplay>
<source src="/sdcard/Download/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>-->
Java file is:
public class WebActivity extends Activity {
WebView wv;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.web_activity);
wv = (WebView) findViewById(R.id.webview);
wv.loadUrl("file:///android_asset/new2.html");
wv.getSettings().setAllowFileAccess(true);
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setPluginsEnabled(true);
// webview.loadUrl("file:///android_asset/new.html");
}
}
XML file is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
You need to call your file through local host -- file://localhost/ -- otherwise your phone will not recognize that it is you asking for permissions. By using your browser without localhost you are pinging off a satellite and can not make it back on re-rentry.
You are getting the controls to display because they come from a public html folder, but your source ( the video ) does not.
From this blog it states there are two steps:
Create new class that extends ContentProvider and override essentially 1 method openFile. Method onCreate can be empty returning true and the rest can just throw UnsupportedOperationException.
Add a provider entry to AndroidManifest.xml.
This page shows how to do it as well - a summary from that page follows:
Step 1: Declare your Content Provider in AndroidManifest.xml:
<provider android:name="MyDataContentProvider"
android:authorities="com.techjini" />
^^^^^^^^^^^ change this
Step 2:
Create your ContentProvider and implement openFile.
All you have to do is get real path from uri, open it and return the descriptor
URI uri = URI.create("file:///data/data/com.techjini/files/myImage.jpeg");
^^^^^your path to your file
File file = new File(uri);
ParcelFileDescriptor parcel =
ParcelFileDescriptor.open(file, ParcelFileDescriptor.MODE_READ_ONLY);
return parcel;
You can find out where your image is stored using:
System.out.println(getFilesDir().getAbsolutePath());
You can now load the file:
myWebView.loadUrl("content://com.techjini/myImage.jpeg");
^^^^^^^^^^^change to same as in manifest
hope that helps.
What happens if you change "/sdcard/Download/video.mp4" to "file:///sdcard/Download/video.mp4"? I mean the html part:
<video width="365" height="200" src="file:///sdcard/Download/video.mp4" controls autobuffer></video>
I couldn't open the html page in a custom web app. However I noticed that without adding "file:///" the video wouldn't play in my android browser. (In my case by adding "file:///" it took some time before the video started loading.)
<video width="365" height="200" src="video.mp4" controls autobuffer></video>
and the video.mp4 should be in your assets folder, the same place where you are putting your new2.html
To play MP4 video in WebView, you need to first declare Content Provider in Manifest
<provider android:name = "MyDataContentProvider" android:authorities="com.myapp" />
Implement open file with open() method −
URI myURL = URI.create("file:///mypath/new.mp4");
File f = new File(myURL);
ParcelFileDescriptor p =
ParcelFileDescriptor.open(f, ParcelFileDescriptor.MODE_READ_ONLY);
return p;
I want to achieve the following.
<video src="file:///Users/username/folder/video.webm">
</video>
The intent is that the user will be able to select a file from his/her hard drive.
And the reason for not uploading is of course transmission costs and storage quota. There will be no reason to save the file.
Is it possible?
It is possible to play a local video file.
<input type="file" accept="video/*"/>
<video controls autoplay></video>
When a file is selected via the input element:
'change' event is fired
Get the first File object from the input.files FileList
Make an object URL that points to the File object
Set the object URL to the video.src property
Lean back and watch :)
http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/
(function localFileVideoPlayer() {
'use strict'
var URL = window.URL || window.webkitURL
var displayMessage = function(message, isError) {
var element = document.querySelector('#message')
element.innerHTML = message
element.className = isError ? 'error' : 'info'
}
var playSelectedFile = function(event) {
var file = this.files[0]
var type = file.type
var videoNode = document.querySelector('video')
var canPlay = videoNode.canPlayType(type)
if (canPlay === '') canPlay = 'no'
var message = 'Can play type "' + type + '": ' + canPlay
var isError = canPlay === 'no'
displayMessage(message, isError)
if (isError) {
return
}
var fileURL = URL.createObjectURL(file)
videoNode.src = fileURL
}
var inputNode = document.querySelector('input')
inputNode.addEventListener('change', playSelectedFile, false)
})()
video,
input {
display: block;
}
input {
width: 100%;
}
.info {
background-color: aqua;
}
.error {
background-color: red;
color: white;
}
<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*" />
<video controls autoplay></video>
That will be possible only if the HTML file is also loaded with the file protocol from the local user's harddisk.
If the HTML page is served by HTTP from a server, you can't access any local files by specifying them in a src attribute with the file:// protocol as that would mean you could access any file on the users computer without the user knowing which would be a huge security risk.
As Dimitar Bonev said, you can access a file if the user selects it using a file selector on their own. Without that step, it's forbidden by all browsers for good reasons. Thus, while his answer might prove useful for many people, it loosens the requirement from the code in the original question.
Ran in to this problem a while ago.
Website couldn't access video file on local PC due to security settings (understandable really)
ONLY way I could get around it was to run a webserver on the local PC (server2Go) and all references to the video file from the web were to the localhost/video.mp4
<div id="videoDiv">
<video id="video" src="http://127.0.0.1:4001/videos/<?php $videoFileName?>" width="70%" controls>
</div>
<!--End videoDiv-->
Not an ideal solution but worked for me.
I tried to simplify the answer of Dimitar Bonev as much as I could.
<html>
<head>
<title>HTML5 local video file player example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>HTML5 local video file player example</h1>
<input type="file" accept="video/*"><br>
<video controls></video>
<script type="text/javascript">
(function localFileVideoPlayer() {
'use strict'
var playSelectedFile = function(event) {
var file = this.files[0]
var URL = window.URL || window.webkitURL
var fileURL = URL.createObjectURL(file)
var videoNode = document.querySelector('video')
videoNode.src = fileURL
}
var inputNode = document.querySelector('input')
inputNode.addEventListener('change', playSelectedFile, false)
})()
</script>
<p>I hereby signed confess solemnly that I have no idea what this code does. But it now works.
<p>Firefox Lubuntu 18.03
<p>Simplified: `http://jsfiddle.net/dsbonev/cCCZ2/` `https://stackoverflow.com/users/691308/dimitar-bonev`
</body>
</html>