I am encountering an issue while trying to play and stop a video tag created from an object tag. I keep getting an error message stating that play is not a function.
Below is my code:
<html>
<head>
<head/>
<body>
<object data="sample.mp4" name="VideoAdv" style="min-width: 100%; min-height: 100%;position:absolute;bottom:0;" >
<param name="allowFullScreen" value="true" />
<param name="loop" value="true" />
<param name="controls" value="false" />
<param name="autoplay" value="autoplay" />
<param name="Muted" value="true" />
</object>
<body/>
</html>My jQuery script:
$("[name=media]").play();
I am using name=media because when I inspect the HTML in developer tools, I can see this
<object data="sample.mp4" name="VideoAdv" style="min-width: 100%; min-height: 100%;position:absolute;bottom:0;">
<html><head><meta name="viewport" content="width=device-width"></head><body>
<video controls="" autoplay="" name="media"><source src=".../sample.mp4" type="video/mp4"></video></body></html>
<param name="allowFullScreen" value="true">
<param name="loop" value="true">
<param name="controls" value="false">
<param name="autoplay" value="autoplay">
<param name="Muted" value="true">
</object>How can I resolve the issue of playing and stopping the video (none of the params that I have set seem to be working)?
My main goal is to display both a video and an image or sequence of images just by changing the name attribute without having to modify the JavaScript or HTML code. Is there any other way to achieve this?