javascript - 源标记和绝对 URL

标签 javascript css html

您好,在编写了有关如何制作媒体播放器的教程后,我发现我无法使用绝对 URL 连接到任何媒体。在努力搜索 W3schools 和其他地方的答案之后,语法在我看来仍然不清楚。据我所知,使用了 source 标记,并且可以用于定位不同的媒体类型,例如 ogg、webm、mp4,例如,

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

我的问题是,是否可以通过这种方式将绝对 URL 与源标记一起使用,这样做的语法是什么?亲切的问候并感谢您抽出宝贵时间 - 罗比

伙计们,你能看看这个吗,我很抱歉,它不是严格意义上的 html 和 css,但它也包含脚本,正如你所看到的,媒体播放器调用某些函数,其中一个应该是 onclick 函数来加载现在相对 URL,但它不起作用!啊没有没有痛苦的生活!有什么想法吗?

    <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>  

最佳答案

当然可以。只需包含视频的绝对路径即可:

<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>

要点是按照正确的顺序组织文件,用户浏览器将自动检测支持的文件类型并相应地播放。

阅读更多@:http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/ . 我相信你已经读过这个:http://www.w3schools.com/tags/tag_video.asp

关于javascript - 源标记和绝对 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23468923/

相关文章:

javascript - 如何用javascript填充文本框?

javascript - 如何从 javascript 中的字符串中去除(或正则表达式匹配)一个 unicode 字符?

javascript - 在 <ul><li><a> 的第一级上获取没有 id 和 e.preventDefault() 的 <ul> 列表中的子 <ul>

javascript - 如何使用 NodeJS 将变量传递给其他模块?

css - 有没有一种语义方法可以用 html 和 css 去强调文本?

css - Bootstrap 字体粗细 : 500 looks "normal" on Firefox

javascript - 桥+命令模式

html - 如何为 HTML 背景选择正确的图像大小?

html - 我的CSS有什么问题。向左浮动导致问题

iOS:在 iPad 应用程序中绘制可编辑图形,使用 html5