The http url on an iPad in the src attribute of an HTML 5 video tag is malfunctioning

Having trouble loading a video on iPad using an http URL in the src attribute of an HTML5 video tag. Both static and dynamic approaches have been attempted, but it works fine on web browsers. Here is an example of the code:

Static:

     <!DOCTYPE html>
    <html>
    <body>

    <video width="320" height="240" controls="controls">
      <source src="http://xyz.mp4" type="video/mp4">
Your browser does not support the video tag.
    </video>

    </body>
    </html>

Dynamic:

function Video(){
           var html = "";
html += '<video id="someVideo" width="712" height="500" controls="controls" autoplay="autoplay">';
html += '<source src="http://xyz.mp4"  type="video/mp4" />';
html += '</video>';
$("#page33video2").html(html);

$('#someVideo').attr('src', 'http://xyz.mp4');
$('#someVideo')[0].load();


}

Is there any solution for loading a video using an http URL in the src attribute of an HTML5 video tag?

Thank you very much. Vikas

javascriptcsshtml

Answer №1

Here is a simple way to dynamically set the src of a video element:

<!DOCTYPE html> 
<html> 
<body> 
<video id="video1" style="display: none;">
</video>
<script>
function playVideo() {
document.getElementById("video1").style.display = "inline";
myVid=document.getElementById("video1");
myVid.src= "http://www.w3schools.com/tags/mov_bbb.mp4";
myVid.play();
}
</script> 
<p onclick="playVideo();">Click me to play</p>
It may take some time to load Video
</body> 
</html>

:)

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

Discovering the properties of a class/object in a module with Node.js

Recently I delved into the world of node.js and found myself puzzled about how to discover the attributes, such as fields or properties, of a class or object from a module like url or http. Browsing through the official documentation, I noticed that it on ...

javascriptnode.js

Creating a calculator with JQuery and encountering challenges with performing multiple calculations

I've been working on a calculator using jQuery, but I'm encountering issues with the clear button not functioning properly after multiple calculations. On top of that, subsequent calculations are producing inaccurate results. I am seeking to enh ...

javascriptjqueryhtml

How can I showcase the Junit HTML report in Karate DSL, as outlined in the official Karate documentation?

After following the Karate Doc and pasting the Junit HTML Report into my browser, I was surprised to see that the output was in plain text and did not look anything like what was described in the tutorial video. I attempted to view it on both Firefox 57.0. ...

htmljunitkarate

Exploring the world of HTML5 speed testing: getting started

Can anyone provide guidance on how to begin with an HTML5 bandwidth test? I am trying to replicate a flash-based version and any recommendations would be greatly appreciated. ...

javascripthtml

Unable to wrap the strings from the database in a span element

I have a challenge where I need to enclose the first and last strings that represent the title and price of a product within a div using a span tag. These strings are dynamic, sourced from a database, and differ for each product. I have attempted to use th ...

javascripthtmljquerywrapper

Troubleshooting navigation problems in AngularJS Bootstrap Navbar

Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...

javascripthtmlcssangularjstwitter-bootstrap

Getting the values of several labels using a class name - a comprehensive guide

Is there a way to retrieve the values of labels with the "timeAuction" class? I'm currently working on a JavaScript function that will target each label with the class name timeAuction and adjust its value. The number of labels with this class can va ...

javascriptjqueryhtml

Is there a way to access the result variable outside of the lambda function?

My goal is to retrieve data from an external API using Typescript. Below is the function I have written: export class BarChartcomponent implements OnInit{ public chart: any; data: any = []; constructor(private service:PostService) { } ngOnInit( ...

javascriptangularjstypescript

How can you limit access to certain routes in Nuxt.js to only clients who possess a valid JWT token?

In Nuxt.js, implementing authentication can be done in the following steps: The client authenticates by sending its credentials in an HTTP request to a specific API route in the Nuxt backend; The Nuxt backend responds with a JWT token for accessing protec ...

javascriptvue.jsauthenticationnuxt.jsbackend

wait until the CSS parser retrieves the CSS files

I am trying to ensure that the page is rendered only after the CSS has been loaded. The function css_parser.getCSSFiles() reads the file asynchronously and sends the CSS content to the variable css.cssFile. How can I make sure that res.render waits for t ...

javascriptnode.jsexpress

Tips for using the deferred method in ajax to enhance the efficiency of data loading from a php script

I recently discovered this method of fetching data simultaneously using ajax. However, I'm struggling to grasp the concept. Can someone please explain how to retrieve this data from a PHP script and then add it to a div similar to the example provided ...

javascriptphpjqueryajax

Tips for swapping out textures imported from Collada with ShaderMaterial textures in Three.js

Is it possible to update the textures of a basic 3D model loaded using the Collada loader in the Three.js library? My goal is to incorporate color, specular, and normal maps onto the model using ShaderMaterial by referencing new files with the model' ...

javascriptwebglthree.jscollada

Angularjs - Navigating the Depths of OrderBy: Effective Strategies for Handling Complex Sorting Structures

I have a collection of Incidents (displayed as an array below) that I need to sort meticulously by State, Priority, and Start_date. Specifically, I want them ordered in the sequence of Initial > Ongoing > InReview > Resolved for State, then Priori ...

javascriptangularjs

When attempting to use $.ajax to send JSON, it instead sends a query string

I'm having an issue where I'm using ajax to send JSON data with the following script: var sendData = {"test":"opa"}; console.log(sendData); $.ajax({ contentType: "application/json", method: "POST", url: "/test", dataType: "json", ...

javascriptjqueryajax

Mastering the integration of Sass with NextJS

After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later: Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradie ...

cssreactjsnpmsassnext.js

Exploring user inputs and displaying variables using JavaScript and HTML 4.01

I was testing some code and I'm facing an issue that I can't figure out: <HTML> <head> <title> Page 1 </title> <script> function myFunction() { var x=document.getElementById("myEmail") document.write(x) } </scr ...

javascripthtmlhtml4

Unable to change background image using jQuery

Snippet: const imageUrl = 'img/star.png'; $("#venueId-"+nodeId).css('background','url("'+imageUrl+'") no-repeat top right'); This piece of code is the start of a function that triggers upon clicking. The goal is to ...

jquerycss

`Is there a way to avoid extra re-renders caused by parameters in NextJS?`

I am currently in the process of implementing a standard loading strategy for NextJS applications using framer-motion. function MyApp({ Component, pageProps, router }) { const [isFirstMount, setIsFirstMount] = useState(true); useEffect(() => { ...

javascriptreactjsparametersnext.jsframer-motion

Calculating the height of the browser menubar, toolbar, navigation bar, and bookmarks can be easily achieved using jQuery or JavaScript

How can I use jQuery to calculate the height of the browser and adjust the position of another div element accordingly? What steps do I need to take to achieve this functionality? ...

javascriptjquery

React - Children components in an array not updating when props are modified within a callback function

The question may be a bit unclear, so let me provide further explanation. This is a personal project I am working on to improve my understanding of React basics and socket.io. Within this project, I have developed a CollapsibleList component and a NestedL ...

javascriptreactjssocket.io