CODEWITHSUNDEEP
javascriptcsshtml
user3528719
user3528719

Reputation: 7

source tag and absolute URL

Hi after coding a tutorial on how to make a media player I find that i cannot connect to any media with an absolute URL. After having made a diligent search for the answer W3schools and elsewhere the syntax still seems unclear in my mind. As far as I am aware the source tag is used and can be used to target different media types eg, ogg, webm, mp4, for example, 

<video id='media-video' controls>
<source src="fish.mp4" type="video/mp4">
    <source src="fish.webm" type="video/webm">
</video>

My question is this, is it possible to use an absolute URL with the source tag in this way and what is the syntax for doing so? kind regards and thanks for taking the time - robbie

guys could you take a look at this, i apologise as its not strictly html and css but it contains the script also, as you can see the media player calls certain functions one of which should be the onclick function to load the now relative url, but it doesnt work! ahhh is there no life without pain! Any ideas?

    <html lang='en'>
<head>
    <meta charset='utf-8' />
    <title>Sample Media Player using HTML5's Media API</title>
    <link href='media-player.css' rel='stylesheet' />
    <script src='media-player.js'></script>
</head>
    <body>
<h1>Sample Media Player using HTML5's Media API</h1>
<div id='media-player'>
    <video id='media-video' controls>
        <source src=http://www.youtube.com/myvideo type="video/mp4">
    </video>
    <div id='media-controls'>
        <progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
        <button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>   
        <button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
        <button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
        <button id='volume-inc-button' class='volume-plus' title='increase volume' onclick='changeVolume("+");'>Increase volume</button>
        <button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick='changeVolume("-");'>Decrease volume</button>
        <button id='mute-button' class='mute' title='mute' onclick='toggleMute("true");'>Mute</button>  
    </div>
    <div id='media-play-list'>
        <h2>Play list</h2>
        <ul id='play-list'>
            <li><span class='play-item' onclick='loadVideo(http://www.youtube.com/myvideo);'>Fischer</span></li>
            <li><span class='play-item' onclick='loadVideo("paddle-wheel.webm", "paddle-wheel.mp4");'>Paddle Steamer Wheel</span></li>
            <li><span class='play-item' onclick='loadVideo("grass.webm", "grass.mp4");'>Grass</span></li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 1537

Answers (1)

Dio Phung
Dio Phung

Reputation: 6282

Of course it is possible. Just include the absolute path to your videos:

<video controls> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>

The gist is to organize your file in the correct order, user browser will auto detect the supported file types and play it accordingly.

Read more @: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/. And I believe you've read this: http://www.w3schools.com/tags/tag_video.asp ?

Upvotes: 1

Related Questions