Quiero crear una prueba de concepto que muestre al usuario que si sube el mismo video en formato .MP4 y OGG, la etiqueta de video generada (usando videojs) será multiplataforma.¿Cómo puedo mostrar directamente un video subido recientemente?
He creado correctamente un fileuploader usando el diseñador y carga archivos de hasta 512mb, a la carpeta "archivos" dentro de la solución, pero me gustaría saber cómo actualizar la página web con la etiqueta de video generada.
Esta es la etiqueta quisiera cambiar:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source id="mp4" src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source id="webm" src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source id="ogg" src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
para guardar mi método:
protected void btnUpload_Click(object sender, EventArgs e){
//check to make sure a file is selected
if (FileUpload1.HasFile) {
//create the path to save the file to
string fileName = Path.Combine(Server.MapPath("~/Files"), FileUpload1.FileName);
//save the file to our local path
FileUpload1.SaveAs(fileName);
}
}
EDIT:
casi tengo la solución ahora. de alguna manera no consigue el camino correcto. La solución que creó:
<script type="text/javascript">
var _strSource = '<ASP:LITERAL runat="server" id="litSource" />';
window.onload = function()
{
if (_strSource != "") {
alert(_strSource);
var video = document.getElementById('objVideo');
var sources = video.getElementsByTagName('source');
alert(sources[0].src);
sources[0].src = _strSource;
video.load();
video.play();
}
}
</script>
Y en el lado del servidor:
protected void btnUpload_Click(object sender, EventArgs e){
//check to make sure a file is selected
if (FileUpload1.HasFile) {
//create the path to save the file to
string fileName = Path.Combine(Server.MapPath("/Files"), FileUpload1.FileName);
//save the file to our local path
FileUpload1.SaveAs(fileName);
this.litSource.Text = fileName.Replace("\\", "\\\\");
}
}
También he añadido esto en mi web.config:
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".ogg" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
<mimeMap fileExtension=".m4v" mimeType="video/m4v" />
</staticContent>
Ahora cambia la ruta de acceso (en mi caso) C: \ Projects \ FileUploadTest \ FileUploadTest \ Files \ c4b3ae2189ea.ogg. Esta es la ruta real donde se carga el archivo, pero el navegador no puede llegar a esta ruta. ¿Alguien tiene una idea de cómo lograr esto?
Creo que es la caída de flash que se almacena en caché. Incluso si configuro mi navegador para que no guarde en caché nada, parece que todavía lo hace. Cerrar el navegador y volver a abrirlo es la solución, pero ¿alguien sabe si puedo restablecer el caché de Flash? –
Nota: funciona en Chrome (usando Chrome, no se obtiene el retorno de Flash) –