Using HTML5 Video Support is pretty amazing but doesn't work in IE versions, So i didn't prefer it.
I am using MVC4 Razor View engine for development.
I came up with this issue-
While i embed video directly from youtube then it is working fine. But when i upload a video and then show it through #Model.FilePath then it is not even showing iframe there. The path is correct.
Controller-
[HttpPost]
public ActionResult Index(HttpPostedFileBase file, SystemUser user)
{
if (file != null && file.ContentLength > 0)
{
string path = Server.MapPath("~/Logo/");
file.SaveAs(path + file.FileName);
string filePath = "/Logo/" + Path.GetFileName(file.FileName);
string Extension = Path.GetExtension(file.FileName);
var scope = (from u in dv.SystemUsers
where u.UserId == this.LoggedInUser.UserId
select u).FirstOrDefault();
scope.FilePath = filePath;
scope.FileName = file.FileName;
dv.SystemUsers.GetModifiedMembers(scope);
dv.SubmitChanges();
return RedirectToAction("userprofile", "User");
}
return View();
}
View-
#model MvcApplication8.Models.SystemUser
<h2>
UserProfile</h2>
<iframe width="560" height="315" src="#Model.FilePath" frameborder="0" ></iframe>
FilePath-
/Logo/video-2012-12-08-21-31-56.mp4
While working with images instead of video using <img src="#Model.FilePath"> it was working excellent.
What went wrong with iframe embedding?
Are you looking for network (with example devTool F12 Chrome) if he found your url ? After saved your video, can you read it ?
you can try with
#Url.Content("~/Logo/video-2012-12-08-21-31-56.mp4")
OR
UPDATE
you do this :
#Url.Content(Model.Filepath)
This work fine for me !
or example (jsfiddle) here
Related
Trying to view pdf file. Toolbar is showing differently in different browsers. Is there any way to hide this toolbar in all browsers.
Code in .cshtml file:
<div id="zoomOut">
<object data="#Url.Action("ViewFinalReport", new { Id = #ViewBag.FileName, SystemId = Model.SystemId, InspectionReportId = Model.ReportId })" type="application/pdf" width="900" height="650">
</object>
</div>
Code in controller:
public FilePathResult ViewFinalReport(string Id, int SystemId, int InspectionReportId)
{
string path = "";
string filePath = "";
string customerFolderName = "";
SystemInspectionReport SystemInspectionReport = new Models.Objects.SystemInspectionReport();
TestSoln.Models.Objects.SystemInspectionReports SystemInspectionReports = new Models.Objects.SystemInspectionReports(SystemInspectionReport, new BaseParams() { customerId = CustomerId, userId = UserId, timeOffSet = TimeOffSet });
string FileName = SystemInspectionReports.GetInspectionSystemReportFileName(SystemId, InspectionReportId, true);
DataTable dataTable = GetCustomerDetails(CustomerId).Tables[0];
if (dataTable.Rows[0]["Folder"] != DBNull.Value)
{
customerFolderName = dataTable.Rows[0]["Folder"].ToString();
}
path = HttpContext.Application["FileFolder"].ToString() + "\\" + customerFolderName + "\\InspectionReports\\" + SystemId + "\\" + InspectionReportId + "\\FinalReport\\" + FileName;
filePath = new AppSettings()[AppSettingsKey.FileLocation].Value + path;
return File(filePath, "application/pdf");
}
I can view the pdf in all the browsers. But the problem is that toolbar shown differently in different browsers. So I want to hide the toolbar. Any idea??
You can use embed instead of object and just add #toolbar=0 at the end of url to remove the toolbar. Not sure if the same applies to object.
<embed src="#Url.Action("ViewFinalReport", new { ...})#toolbar=0" width="500" height="375"> (Disable toolbar)
<embed src="#Url.Action("ViewFinalReport", new { ...}#toolbar=1" width="500" height="375"> (Enable toolbar)
EDIT:
Currently there is no easy configuration that can be done and works for all browsers.
The #toolbar and some other parameter setted after # are Adobe's proprietary "PDF Open Parameters". This works on Chrome because Chrome's PDF Viewer was made with compatibility with Acrobat's parameters.
So, if your user does not use Adobe reader extension, most users uses default browser configuration, this parameters may not work. As developers we have no control on what plugin/extension the user have configured on their browser to show PDF files.
An alternative is to use Mozilla's pdf.js library, that can render the pdf file inside a canvas. At this link you will find some live examples: https://mozilla.github.io/pdf.js/examples/
This a commom problem and you can find some questions on Stack Overflow and mozilla community about it:
How can I embed a PDF in a webpage without showing the Firefox PDF viewer toolbars?
Hiding the toolbars surrounding an embedded pdf?
Can I hide the Adobe floating toolbar when showing a PDF in browser?
Hide toolbar of pdf file opened inside iframe using firefox (This one has a good explanation too)
Hiding the toolbars surrounding an embedded pdf?
https://support.mozilla.org/nl/questions/1262019
https://support.mozilla.org/en-US/questions/1119523
Simple question...
I am making a small webpage that should be viewed from a SmartTV. This page serves some Ajax calls etc.
But the site also shows a Youtube video. The problem is that Youtube video shows up as Flash content. The smart TV doesn't play flash, so I'm in trouble.
Anyone have any idea how to handle this?
Yes, I wanted to do the exact same thing. This is how implemented this logic. And it is working fine for me.
HTML:
<div id="webElement" style="display: none;"></div>
JS:
When ajax call is received (contains many files of type YouTube/WebPages/MP4 files):
if (Utility.isYouTube(dr.FileName)) {
dr.IsWeb = true;
dr.WebUrl = "http://www.youtube.com/embed/" + Utility.getParameterByName('v', dr.FileName) + "?rel=0&autoplay=1";
}
This is how I played it (if webpage/Youtube):
var webElement = jQuery("#webElement");
webElement.empty();
var obj = "<object type='text/html' width='1920' height='1080' data='" + dr.WebUrl + "' onerror='Player.onWebElementError();'> </object>";
webElement.append(obj);
webElement.show();
Hope it will help you to achieve what you want.
Samsung SmartTVs do use Flash. It depends on which TV you want your app to run. If you are developing for 2011 it will be a no go, since 2011 SmartTV models only support AS2.0 and YouTube has stopped supporting AS2.0 for their API.
For 2012 and 2013 models you can easily embed a YouTube video by doing:
var attributes = { id: "myytplayer" }, params = { allowScriptAccess: "always", allowFullScreen: "true"};
swfobject.embedSWF('http://www.youtube.com/apiplayer?enablejsapi=1&version=2&fs=1', "ytplayer",400, 600, "6", null, null, params, attributes);
Then to load a video:
ytp.getVideo('http://www.youtube.com/watch?v=ubAjEjkJIJo');
ytp.getVideo = function (url) {
//loads video by url
ytp.ytp_ref.cueVideoByUrl(url);
};
I am trying to record from the microphone using HTML5 in Chrome 29 Beta for Android (it has enabled web audio support in its beta 29). In the code below, ProcessAudio is the web audio filter function, in which I receive the input buffer from the microphone. I get the correct sample size. However, the audio pcm samples in mobile chrome are always zero. Does chrome disable the input to the audio filters in its mobile version? Has anybody got audio recording working using HTML5 in chrome mobile version?
The following code works fine in chrome (desktop version).
<!DOCTYPE HTML>
<html>
<head>
<script>
function GetMedia(obj, fnSuccess, fnFailure)
{
if(navigator.getUserMedia)
{
return navigator.getUserMedia(obj, fnSuccess, fnFailure);
}
else if(navigator.webkitGetUserMedia)
{
return navigator.webkitGetUserMedia(obj, fnSuccess, fnFailure);
}
else if(navigator.mozGetUserMedia)
{
return navigator.mozGetUserMedia(obj, fnSuccess, fnFailure);
}
else if(navigator.msGetUserMedia)
{
return navigator.msGetUserMedia(obj, fnSuccess, fnFailure);
}
alert("no audio capture");
}
var incrementer = 0;
function ProcessAudio(e)
{
var inputBuffer = e.inputBuffer.getChannelData(0);
var outputBuffer = e.outputBuffer.getChannelData(0);
outputBuffer.set(inputBuffer, 0);
document.getElementById("display").innerText =
incrementer + " " + inputBuffer[0];
incrementer++;
}
var context = null;
function Success(localMediaStream)
{
context = new window.webkitAudioContext();
var microphone = context.createMediaStreamSource(localMediaStream);
var node = context.createScriptProcessor(4096, 1, 1);
node.onaudioprocess = ProcessAudio;
microphone.connect(node);
node.connect(context.destination);
}
function Error(err)
{
alert("no audio support");
}
function load(e)
{
GetMedia({audio:true,video:false}, Success, Error);
}
</script>
</head>
<body onload="load(event)">
<div>Audio Player</div>
<div id="display"></div>
<video id="localvideo" autoplay="autoplay" style="opacity:1"></video>
</body>
</html>
We now have Web Audio input working in Chrome for Android Beta (31.0.1650.11).
There's an issue with inputBuffer in Chrome beta for Android right now - it always contains zeros (at least on those devices that I tested) as you mentioned - confirmed. That ain't much of help but for demo purposes the best I could achieve right now is playing "live" input stream via <audio> object. See here. Hit "record" and then start playing the audio object. The rest beyond that is TARFU in the current beta. Guess I'm waiting for G-folks to patch it asap. What I found out though, is that zingaya.com works fine (that is, records your audio and plays it back to you) on Chrome Beta for Android. Just try them out and they'll play back your stream. Apparently, this is made by leveraging WebRTC. In other words you evidently can record an audio stream that way, I haven't figured out how to do it just yet. Post it up if you come up with something. G-guys are working fast on the other hand - they've released a new beta version less than a week ago that at least can play audio fetched with XHR. The version prior to that couldn't do that even.
In My webpage i am using a image tag, the src attribute is pointing to shared network location ie (/server/images/image1.png). The exact script is "<img src="file://///server/images/image1.png". It is working fine in IE. In firefox, when I do debug using firebug its showing image, but it's not displayed in page (user view). Even it's working fine when copy this location and place it in firefox address bar. What will be the problem while using img tag also what is the solution for this? Thanks in advance.
Putting this as an answer here so as to provide help for others like myself that was searching for how to display networked images and came accross this SO post in the top 3 search engine results. It also seems like a better answer than the java servlet issuing images in the response.
FireFox would not display networked images so I created an MVC helper that extends HtmlHelper.
public static class ImageHelper
{
/// <summary>Converts a photo to a base64 string.</summary>
/// <param name="html">The extended HtmlHelper.</param>
/// <param name="fileNameandPath">File path and name.</param>
/// <returns>Returns a base64 string.</returns>
public static MvcHtmlString PhotoBase64ImgSrc(this HtmlHelper html, string fileNameandPath)
{
var byteArray = File.ReadAllBytes(fileNameandPath);
var base64 = Convert.ToBase64String(byteArray);
return MvcHtmlString.Create(String.Format("data:image/gif;base64,{0}", base64));
}
}
use in the MVC View like so:
using
<img src="#Html.PhotoBase64ImgSrc(image)" height="60px" width="60px" alt="photo" />
here the 'image' in #Html.PhotoBase64ImgSrc(image) is a pure network UNC, e.g.
//Photos/ebaebbed-92df-4867-afe8-0474ef8644eb.jpg
Create a regular HTML img element like so:
<img id="image1" runat="server" ImageUrl=<%# Eval("Value") %>/>
And in code behind do this:
image1.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
Where bytes is a byte[].
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["FileName"] != null)
{
// Read the file and convert it to Byte Array
string filePath = "C:\\Users\\Public\\Pictures\\Sample Pictures\\";
string filename = Request.QueryString["FileName"];
string contenttype = "image/" + Path.GetExtension(filename).Replace(".", "");
FileStream fs = new FileStream(filePath + filename, FileMode.Open, FileAccess.Read);
BinaryReader br = new BinaryReader(fs);
Byte[] bytes = br.ReadBytes((Int32)fs.Length);
br.Close();
fs.Close();
image1.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
}
}
You are done. The image will be displayed.
The solution usually is: use a web server.
You may have to make it like so.
<img src="../server/images/image1.png" />
Once you add the "../" it is basically telling your browser to go back one directory to search for the location after the "../" .
Where is the file located and where is the location of your HTML document?
UPDATE:
I do all of my work on a Network Server as well... This should do the trick.
<img alt="" src="file:///SERVER:/FOLDER/IMAGES/image1.png" />
Thanks,
Aaron
I wrote a servlet which reads the file from LAN using Java File Stream and sets it in response and it does the trick. Thanks to all for valuable response.
I have a video as a background to a web page, and I am trying to get it to loop. Here is the code:
<video autoplay='true' loop='true' muted='true'>
<source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>
Even though I have told the video to loop, it does not. I also tried to get it to loop with the onended attribute (as per this Mozilla support thread, I also tried that bit of jQuery). Nothing has worked so far. Is it an issue with Chrome, or my code?
Edit:
I checked the Network events and HEAD of a working copy (http://fhsclock-labs.heroku.com/no-violence) versus the application I'm trying to get working. The difference is the working copy is serving up the video from a static asset on Heroku (via Varnish, apparently), whilst mine is serving from GridFS (MongoDB).
The Network tab of Chrome's Inspector show that in my application, the video is requested three times. One time the Status is "pending", the second is "canceled", and the final one is 200 OK. The working copy only shows two requests, one's Status is pending and the other is 206 Partial Content. However, after the video plays once, that request changes to "Cancelled" and it makes another request for that video. In my application, that does not happen.
As for Type, in my application, two are "undefined" and the other "video/mp4" (which it is supposed to be). In the working app, all of the requests are "video/mp4".
In addition, I'm getting Resource interpreted as Other but transferred with MIME type undefined. warnings in the Console.
I'm not really quite sure where to begin on this. It's my belief that the issue is server-side, as serving the file as static assets works fine. It could be that the server isn't sending the correct content type. It could be an issue with GridFS. I do not know.
At any rate, the source is here. Any insight that you can offer is appreciated.
Ah, I just stumbled into this exact problem.
As it turns out, looping (or any sort of seeking, for that matter) in <video> elements on Chrome only works if the video file was served up by a server that understands partial content requests. i.e. the server needs to honor requests that contain a "Range" header with a 206 "Partial Content" response. This is even the case if the video is small enough to be fully buffered by chrome, and no more server-round trips are made: if your server didn't honor chrome's Range request the first time, the video will not be loopable or seekable.
So yes, an issue with GridFS, although arguably Chrome should be more forgiving.
Simplest workaround:
$('video').on('ended', function () {
this.load();
this.play();
});
The 'ended' event fires when the video reaches the end, video.load() resets the video to the beginning, and video.play() starts it playing immediately once loaded.
This works well with Amazon S3 where you don't have as much control over server responses, and also gets around Firefox issues related to video.currentTime not being settable if a video is missing its length metadata.
Similar javascript without jQuery:
document.getElementsByTagName('video')[0].onended = function () {
this.load();
this.play();
};
Looks like its been an issue in the past, there are at least two closed bugs on it, but both state that it was fixed:
http://code.google.com/p/chromium/issues/detail?id=39683
http://code.google.com/p/chromium/issues/detail?id=18846
Since Chrome and Safari both use webkit based browsers you might be able to use some of these work arounds:
http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how-to-solve-them/
function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.
vid.play();
}
//loop video
vid.addEventListener('ended', restartVideo, false);
Just in case none of the answers above help you, make sure you don't have your inspector running with the Disable cache option checked. Since Chrome grabs the video from cache, it will basically work once. Just debugged this for 20 minutes before realizing this was the cause. For reference and so I know I am not the only one someone else's chromium bug report.
My situation:
I have the exact same problem, however changing the header of the response message alone didnt do. No loop, replay or seek. Also a pure stop doesnt work, but that could be my configuration.
Answer:
According to some sites (couldnt find them anymore) its also possible to trigger the load() method right after the video ends, and before the next one is supposed to start. That should reload the source causing a once again working video/audio element.
#john
Please note that your answers/links are normal bugs, and not focused on this problem. Using a server/webserver is what causes this problem. Whereas the bugs these links describe are of a different kind. Thats also why the answer isnt working.
I hope it helps, i am still looking for a solution.
For anyone coming on this page 9 years later and if all the above answers didn't work: I had this issue too and I thought the source of the issue was either my browsers or with the server.
I've later noticed that the other websites on internet which use looping videos they don't have issue with looping videos. To troubleshoot I have downloaded a random video from one of the sites and I visited and uploaded on my own server to delightedly find out it was working, so it seemed that the source of the issue was the video I was using.
Then I fixed my video with an online video converter website (don't want to publicize any in particular but the first ones from a quick google research do work) and alas, this solved the issue.
I'm not sure what the real reason of the issue was. I do assume there was a conversion or compression error of the original video that was handed me from my client.
I know this doesn't pertain exactly to the question asked, but if someone comes across this when having a similar issue, make sure that you have your sources in order properly.
I was loading an mp4 and a webm file and noticed that the video was not looping in Chrome. It was because the webm file was the first source listed so Chrome was loading the webm file and not the mp4.
Hope that helps someone else that comes across this issue.
<video autoplay loop>
<source src="/path-to-vid/video.mp4" type="video/mp4">
<source src="/path-to-vid/video.webm" type="video/webm">
</video>
it is super lame but dropbox use the right status code. So upload to dropbox and replace the www by dl.
Thus using a dropbox url the video play fine.
I had same issue and inevitably solved problem by streaming the content.
e.g this is the code with PHP laravel blade html code which is requesting to streaming route:
<video>
<source src="{{route('getVideoStream',$videoId)}}" type="video/mp4"/>
</video>
in the Controller I will stream video and return it as laravel stream function:
public function getVideoStream($videoId){
$path = $pathOfVideo;
$headers = [
'Content-Type' => 'video/mp2t',
'Content-Length' => File::size($path),
'Content-Disposition' => 'attachment; filename="start.mp4"'
];
$stream = new VideoStream($path);
return response()->stream(function () use ($stream) {
$stream->start();
});
}
and VideoStream Class is the streaming class I found from a GitHub gist:
class VideoStream
{
private $path = "";
private $stream = "";
private $buffer = 102400;
private $start = -1;
private $end = -1;
private $size = 0;
function __construct($filePath)
{
$this->path = $filePath;
}
/**
* Open stream
*/
private function open()
{
if (!($this->stream = fopen($this->path, 'rb'))) {
die('Could not open stream for reading');
}
}
/**
* Set proper header to serve the video content
*/
private function setHeader()
{
ob_get_clean();
header("Content-Type: video/mp4");
header("Cache-Control: max-age=2592000, public");
header("Expires: " . gmdate('D, d M Y H:i:s', time() + 2592000) . ' GMT');
header("Last-Modified: " . gmdate('D, d M Y H:i:s', #filemtime($this->path)) . ' GMT');
$this->start = 0;
$this->size = filesize($this->path);
$this->end = $this->size - 1;
header("Accept-Ranges: 0-" . $this->end);
if (isset($_SERVER['HTTP_RANGE'])) {
$c_start = $this->start;
$c_end = $this->end;
list(, $range) = explode('=', $_SERVER['HTTP_RANGE'], 2);
if (strpos($range, ',') !== false) {
header('HTTP/1.1 416 Requested Range Not Satisfiable');
header("Content-Range: bytes $this->start-$this->end/$this->size");
exit;
}
if ($range == '-') {
$c_start = $this->size - substr($range, 1);
} else {
$range = explode('-', $range);
$c_start = $range[0];
$c_end = (isset($range[1]) && is_numeric($range[1])) ? $range[1] : $c_end;
}
$c_end = ($c_end > $this->end) ? $this->end : $c_end;
if ($c_start > $c_end || $c_start > $this->size - 1 || $c_end >= $this->size) {
header('HTTP/1.1 416 Requested Range Not Satisfiable');
header("Content-Range: bytes $this->start-$this->end/$this->size");
exit;
}
$this->start = $c_start;
$this->end = $c_end;
$length = $this->end - $this->start + 1;
fseek($this->stream, $this->start);
header('HTTP/1.1 206 Partial Content');
header("Content-Length: " . $length);
header("Content-Range: bytes $this->start-$this->end/" . $this->size);
} else {
header("Content-Length: " . $this->size);
}
}
/**
* close curretly opened stream
*/
private function end()
{
fclose($this->stream);
exit;
}
/**
* perform the streaming of calculated range
*/
private function stream()
{
$i = $this->start;
set_time_limit(0);
while (!feof($this->stream) && $i <= $this->end) {
$bytesToRead = $this->buffer;
if (($i + $bytesToRead) > $this->end) {
$bytesToRead = $this->end - $i + 1;
}
$data = fread($this->stream, $bytesToRead);
echo $data;
flush();
$i += $bytesToRead;
}
}
/**
* Start streaming video content
*/
function start()
{
$this->open();
$this->setHeader();
$this->stream();
$this->end();
}
}