How to add a button

[satimis]

Hi all,

Following codes starts the video on another page by clicking the image but without a button on it.

[code]
<h3 style="text-align: center;"><strong><span style="color: #0000ff;">How To Play-The-Game</span></strong></h3>
<a href="http://mydomain.com/path/to/How-To-Play-the-Game.mp4" target="_blank"><img class="aligncenter size-medium wp-image-156" alt="stocks_fr_beginners" src="http://mydomain.com/path/to/How-To-Play-The-Game-300x185.png" width="540" height="333" /></a>
[/code]

Please advise how to add a HTML button with a triangle inside on the image? And the video will start and play on the same page. TIA

B.R.
satimis

[JorgeM]

I am not sure that I understand. In teh example you provided, you are showing an image for the hyperlink. Isnt that what you are asking you want to do...show an image that when clicked will take you to the target URL (html button)?

or do you want to use a <button> element instead?

[satimis]

Hi,

No, I expect clicking the image the video will start to play on the same page, but not playing on another page which is now doing. The image doesn't show a "triangle" sign/button on it which is what I need to add.

On following coding:

    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
    <video id="my_video_1" class="video-js vjs-default-skin" controls
    preload="auto" width="600" height="364" poster="oceans-clip.png"
    data-setup="{}">
    <source src="oceans-clip.mp4" type='video/mp4'>
    <source src="oceans-clip.webm" type='video/webm'>
    </video>

    <style type="text/css">
    .vjs-default-skin .vjs-big-play-button {
    -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
    </style>

Clicking the image, which has a "triangle" sign/button on it, starts playing the video on the same page.

Thanks

P.S.
The codes on my first posting were created on WordPress. The codes on this posting were manually created on text editor. I have tried putting the latter codes on the page created with WordPress. But it didn't work.

satimis

[JorgeM]

Ok, what you have above is the HTML5 video element. A few notes you should be aware of...mainly that its not supported across all common browser versions. for example, not supported prior IE 9.

take a look at this example tutorial: HTML5 Video.

In the example, you will notice how the video element is used and there is an example code on how to integrate a basic button element that can be used to play/pause the video. From there, you should be able to work with that basic example and include your own images, buttons, etc.. with JavaScript to control the player.

[satimis]

Hi,

The codes are in the widget of WordPress.

Adding following codes on the widget replacing the original codes;

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="280" height="210" poster="oceans-clip.png"
  data-setup="{}">
  <source src="oceans-clip.mp4" type='video/mp4'>
  <source src="oceans-clip.webm" type='video/webm'>
</video>

<style type="text/css">
.vjs-default-skin .vjs-big-play-button {
    -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
</style>

I can get the result as expected but still having following problems;
1) The video frame is not centered on left/right border of the widget
2) The round button with a triangle inside is not centered. Also it is too big
3) The static picture disappears, i.e the picture showing a window frame on the video
(pls refer to screenshot_01)

Sorry I don't know how to upload the file.

Clicking File;
starts -> Upload Attachments
But I couldn't find the way selecting file to upload

Kindly advise how to fix my problems. TIA