Inserting video into HTML page is not working.

  • 1
  • Problem
  • Updated 2 years ago
  • (Edited)

I am creating some training using HTML pages and video in a hidden div. When users click the video, the div appears where the users can start the video.

I produced the video and copied the entire folder to the web-enabled location my department uses. We do not have a true web server. I am using the HTML5 video tags. I did try using iframes (which are frowned upon here) as suggested in a TechSmith video. While the player appears with an image from the video I received an error message. I read the information from TechSmith but it did not apply.

The video was working before I left work the day before. I didn't change the code when I started working again this morning which is when I tried iframes, embed, and some other things.

I'm totally stumped. Plus I've been researching all morning.

I've tried it on IE 11, Chrome 57.0.2987.133, and Microsoft Edge. IE 11 is the standard. ScreenCast.com is not an option.

Thoughts?

Photo of x2bvshew

x2bvshew

  • 6 Posts
  • 0 Reply Likes

Posted 2 years ago

  • 1
Photo of Kelly Mullins

Kelly Mullins, TechSmith Employee & Helper

  • 2760 Posts
  • 570 Reply Likes
Hi,
I'm sorry you are having trouble. I personally might not be able to help, but, I would like to ask some questions for clarity in case there are others who might be of more help.

  1. When you say you got the video to work, what did success look like for you? For example, the video played from beginning to end and the video controls were visible, etc.
  2. You say you do not have a true web server, what are you using? Can you describe it, please?
  3. When you say the video no longer works, what do you mean? It doesn't display? It displays but doesn't play? Etc. 
  4. Where are you hosting the video and what embed code are you using?
Thanks for any detailed information you can provide.

Kelly
Customer Engagement
TechSmith
Photo of x2bvshew

x2bvshew

  • 6 Posts
  • 0 Reply Likes

Thank you for replying. Here goes:

  1. The video played when I clicked the play button and played until the end. All controls were visible but I didn't use them.
  2. I am using what the team calls a web-enabled share drive.  I can add all kinds of JavaScript and JQuery to HTML pages as well as host help systems built with RoboHelp (with customization).
  3. The video block appears but with a message that says Error: Unsupported video type or invalid file type. The same error message appeared yesterday before I added the entire produced folder.
  4. See #2. The code I'm using is:
<video width="800" height="400" controls>
<source src="video/create_folder/create_folder.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

I am not using the produced CSS though I did try it.

 Let me know if you have more questions.

G.

Photo of susannemistric

susannemistric

  • 98 Posts
  • 73 Reply Likes
I missed seeing your code while I was responding. Looks like you've got that part for the average html5 webpage . Maybe the source file path needs to be something like when you use google drive ?https://yourdrive.com/host/yourvideoid

...And I imagine the video share status might have to be public for a method like that to work.
(Edited)
Photo of susannemistric

susannemistric

  • 100 Posts
  • 76 Reply Likes
I'm presuming you are using MP4 and the html5 video tag . When using the new video element in html5, some older browsers don't support it. Could you have accessed with a newer browser that did and then an older browser that did not? You can add a fallback message to remind users to update to current browsers, (and so you know if that's the issue).

I generally provide at least 2 of 3 html5 video formats just to b safe.

If you want to use a video from YT for example.

If iFrame is frowned upon for some reason (some 4.01 attributes are deprecated) , you can try the new html5 embed tag. It works in all browsers and validates in html5.

Good luck!
(Edited)
Photo of x2bvshew

x2bvshew

  • 6 Posts
  • 0 Reply Likes
I tried both of your suggestions but nothing. The embed tag displayed a black video screen with controls but the video did not start. 

I'm still searching.

Ginger
Photo of susannemistric

susannemistric

  • 100 Posts
  • 76 Reply Likes
Can you confirm that the MIME type for video MP4 is enabled on the share drive?

Have you added Ogg and WebM to see if that helps?

Will the video work on a page outside of the hidden div?

Good luck!
(Edited)
Photo of Dubie

Dubie

  • 1009 Posts
  • 789 Reply Likes
I'm guessing that you are using your own coded pages?

Looking at what code you posted I would as a test try putting the full path to your video
http:// your website/directory/folder/yourvideo.mp4

I have had videos not play sometimes just because of that.  If it works than you can try to shorten your video link down. You may just need a forward slash (/) to the beginning of your link or ../

It could also be one little thing in your coding. Is your <div tag closed? Even CSS coding being off can cause the issue.

On a side note:

I don't know all of your code used but  (again) what you posted  is your code responsive for mobile viewing?

If you like to,  here a basic responsive html5 page code and the CSS  you can try.

All you have to upload is a .mp4 video, the html5 page,  the CSS file/page and a background image (if you want one) Thats it.

Edit where needed...

The HTML5 PAGE CODE:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
  <meta name="robots" content="noindex,nofollow">
  <title>YOUR PAGE TITLE HERE</title>
  <meta name="description" content="" />
  <meta name="author" content="" />
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<br />
<br />
<div class="auto-style1">
<span class="auto-style2">HEAD TEXT HERE</span>
</div>
<br>
<!--Remove the word controls or autoplay if not wanted but you need to have at least one of them-->
<video class="videobox" controls autoplay><source src="YOUR mp4 VIDEO LINK HERE" type="video/mp4">
</video>
<br>
<br>
<!--auto update year/copyright script-->
<p class="auto-style1"><span class="auto-style3">
&copy;<script type="text/javascript">
  document.write(new Date().getFullYear());
</script>
All Rights Reserved
</span>
</p>
</body>
</html>



The CSS Code :


html
* { margin: 0; padding: 0; }
       
        html {
            background: url(BACKGROUND-IMAGE LINK HERE) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
}
.videobox {
display:block;
width:60%;
min-width:280px; /* or thereabouts */
margin: 1em auto;
box-shadow: 0.5em 0.5em 0.5em #333333;
}
.auto-style1 {
text-align: center;
}
/*Head Text*/
.auto-style2 {
color: #000000;
text-decoration: overline underline;
font-size: 2.5em; /* pixels/16=1em  ie; 2.5=40px */
font-weight: bold;
text-shadow: -2px 2px black ;
  }
/*copyright text*/
  .auto-style3 {
color: #000000;
}
  </style>

Here is a example  of the page

http://www.demotestsite.info/dubiesdemos/5/

Keep us updated  If you figure it out :)

Dubie:)
(Edited)
Photo of x2bvshew

x2bvshew

  • 6 Posts
  • 0 Reply Likes
susannemistric:

I do not have the permissions to check the MIME type but I know who does. :)

Dubie:
I have tried adding the full path to the video but it didn't work either.  I'm going to try a relative path just to see. Thank you very much for the code.  Very nice.

Ginger
Photo of Kelly Mullins

Kelly Mullins, TechSmith Employee & Helper

  • 2760 Posts
  • 570 Reply Likes
Thanks so much susannemistric and Dubie for your help with this problem!

Your willingness to jump in and provide expertise in this area is greatly appreciated.

Kelly
Photo of x2bvshew

x2bvshew

  • 6 Posts
  • 0 Reply Likes
I just found out that I cannot play the video from where it is loaded. There is a streaming server we are required to use. Now I need to find out if I have the appropriate permissions to do so. *roll eyes*

Ginger.
Photo of Dubie

Dubie

  • 1009 Posts
  • 789 Reply Likes
Well.... :)  Glad you have possibly found the problem.

Good luck moving forward !

Dubie:)
(Edited)