Issues with HTML5 video playback have been encountered on Chrome and Internet Explorer after hosting the video on a server. The video is in the MOV file format

On our teamVideo.html page, we are incorporating the HTML5 video tag to showcase a video file in .mov format that was captured using an iPhone.

<video preload="none">
<source src="video/v1.mov">
</video>

When the teamVideo.html page is accessed directly in a browser (Chrome, IE9), everything functions correctly and the video plays without any issues.

However, once the page is hosted on a SharePoint site, the video stops working. Chrome displays a black video box with no playback, while IE shows an error message similar to an image not being found. Upon inspecting the developer tools, it's evident that the video file is being requested and downloaded with a 200 OK status. Interestingly, if the video URL is opened in a new tab, the video downloads properly.

Although specifying type="video/quicktime" in the video tag, even the local video fails to play.

<video preload="none">
<source src="video/v1.mov" type="video/quicktime">
</video>

Similarly, setting the type as "video/mp4" works for the local file, but fails to play when hosted on the server.

<video preload="none">
<source src="video/v1.mov" type="video/mp4">
</video>

Experimenting with using an .mp4 file instead of a .mov file also doesn't resolve the issue after hosting. It appears that the SharePoint server assigns the MIME type "application/octet-stream" to the .mp4 file, which could potentially be causing problems with the video tag.

If anyone has insights on what might be causing this issue and how it can be resolved, your suggestions would be greatly appreciated.

javascriptcsshtmlsharepointvideo

Answer №1

Utilize browser tools to verify if the server is delivering a valid response; if not, investigate the error message in your server logs within IIS (enable Request tracing if needed).

If the server is running on IIS, ensure that the mime type is properly configured for all file extensions. Without a corresponding mime type, IIS will generate a 404 error.

Answer №2

I ran into a similar issue with a website hosted on Azure. I was unable to use file types like mp4, ogg, or webm in my HTML5 video. After some troubleshooting, I added the following code snippet to my Web.config file in Visual Studio, which resolved the problem. It turns out Azure was not recognizing the MIME types properly. Special thanks to Alex Titarenko () for pointing me in the right direction.

<system.webServer>

<staticContent>
  <remove fileExtension=".mp4" />
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <remove fileExtension=".ogv" />
  <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
  <remove fileExtension=".webm" />
  <mimeMap fileExtension=".webm" mimeType="video/webm" />
</staticContent>


</system.webServer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why am I unable to attach this to JQuery?

$("input").keydown(function(event){ if(event.keyCode === 13){ return false; } }); I need to prevent the default action when the "enter" key is pressed in any of my text input fie ...

javascriptjqueryhtml

You can obtain the values of multiple div selections using jQuery

In a display with two columns, I want to be able to perform a common operation (such as delete) based on the selection of certain div IDs. If a user selects the div IDs participant_1, participant_4, participant_6 at the same time, I need to collect these ...

javascriptjquery

Maximum number of days that can be selected with Bootstrap Datepicker

I currently have a datepicker set with the multidate option and I am looking to specify a maximum number of days that users can select, say 5 days. Once a user has selected 5 days, any additional days should become disabled dynamically. How can this be a ...

javascriptjquerytwitter-bootstrapdatepicker

The functionality of the Bootstrap toggle button seems to be malfunctioning

I'm having trouble with the toggle button in my Bootstrap code. When I resize the window, the toggle button appears but clicking on it doesn't do anything. This is my first time using Bootstrap, so I might have made some silly mistake. Any assist ...

javascriptjquerytwitter-bootstrapdrop-down-menutoggle

The event "click .className" within the Marionette module is failing to trigger

I'm facing an issue with some code that I've written. Here's a snippet of what it looks like: myApp.module(args, function(args){ Views.MainView = Marionette.ItemView.extend({ //template, tagName, className down: false, events: ...

javascriptjqueryevent-handlingmarionette

How to prevent checkbox autocomplete from selecting the previously checked value using Jquery Ajax

Working on implementing the "Autocomplete ajax search" feature using Php. Successfully fetching data from the database. Currently, when searching for something, the results with checkboxes are displayed. However, when I search for a text, check a checkbo ...

javascriptphpjqueryajax

With the addition of a key element in the opening statement

Take a look at this code snippet: <div class="content"> This is some title<br/> Some text<br/> And maybe more text. </div> I am trying to wrap the first sentence with a <span> tag before the <br/> element, like s ...

jquerycss

Unable to transfer information from the Parent component to the Child component

Can you help me solve this strange issue? I am experiencing a problem where I am passing data from a parent component to a child component using a service method that returns data as Observable<DemoModel>. The issue is that when the child component ...

javascriptangulartypescript

Mobile devices not responding to media queries properly

My website has different sets of CSS styles for various screen sizes: (1) @media only screen and (max-width: 566px) { (2) @media only screen and (min-width: 567px) and (max-width: 767px) { (3) @media only screen and (min-width: 768px) and (max-width: 999 ...

cssresponsive-designmedia-queriessmartphone

using regular expressions to find unclosed font tags that match on a single line

Even though regex is not typically recommended for parsing HTML, in this case we are dealing with a single line string input to a function. For example: <font color = "#ff0000"> hello </font>. I want the regex pattern to match only if the tag ...

javascriptpythonhtmlregexfonts

Troubleshooting: Issues with Jquery's replaceWith function

I'm facing an issue with a table I have that includes a button in one of its columns. The button is supposed to toggle the class of the current row in the table and then replace itself once clicked. $(document).ready(function() { $(".checkOut"). ...

javascriptjqueryhtmlcss

Move Picture with Click (like the action on Google Maps)

Currently on the lookout for some code that will enable me to manipulate a floor plan in a manner reminiscent of the one showcased at whitehouse.gov I am in the process of coding a website that would benefit from integrating a similar function with their ...

jquerycssdhtml

Using data fetched from PHP in HTML via jQuery post: A step-by-step guide

I have created a function in jQuery that uses $.post to send data to a PHP file. The query in the PHP file is working fine and returning the data back successfully. JavaScript code: function send_agenda_data(cidade_data){ var data = {'cidade_dat ...

phpjavascriptjqueryhtmlpost

What are the reasons to steer clear of setting y.innerHTML equal to x.innerHTML?

If we have a DIV x on the webpage and want to duplicate its contents into another DIV y, we might be tempted to use the following code: y.innerHTML = x.innerHTML; This can also be achieved using jQuery: $(y).html( $(x).html() ); However, it is recommen ...

javascriptjqueryhtmlbrowser

Problem with opening the keyboard feature in an Ionic app

Hello everyone, I'm relatively new to Ionic development and I've been trying to integrate a keyboard plugin into my application that opens from the footer and focuses on input fields for entering values. Here is the link to the plugin I used: ht ...

javascripttypescriptionic-frameworkionic2

Initiate a function once the innerHTML content in Angular has been completely loaded

I'm curious to know if it's possible in Angular to receive a notification when the Inner HTML has finished loading. I have a web application that retrieves an SVG image from a server and I need to display it as innerHTML in order to interact with ...

javascripthtmlangulartypescriptsvg

The server is unable to process the .get() request for the file rendering

Struggling with basic Express routing here. I want the server to render 'layout2.hbs' when accessing '/1', but all I'm getting is a 304 in the console. Here's the error message: GET / 304 30.902 ms - - GET /style.css 304 3.3 ...

javascriptnode.jsexpressrouteshandlebars.js

Tips and techniques for implementing push notifications in front-end applications without the need for a page refresh

I am working on a Python program that inserts data into a XAMPP database. I am looking for a way to continuously monitor the database for any changes and automatically send updates to the frontend without relying on click events. Is there a method simila ...

javascriptphpmysqlajaxlaravel-5

Creating dynamic JSX content in NextJS/JSX without relying on the use of dangerouslySetInnerHTML

I have a string that goes like "Foo #bar baz #fuzz". I'm looking to create a "Caption" component in NextJS where the hashtags become clickable links. Here's my current approach: import Link from "next/link"; const handleHashTag = str => st ...

javascriptreactjsjsxnext.js

Searching Text Boxes with Javascript: A Better Way to Handle Arrays

I'm struggling to implement a feature where users can search for authors in a database and be redirected to the corresponding HTML if found. Otherwise, it should display a message saying "No Author Found"... I need some assistance in getting this fun ...

javascripthtmlarrays