當前在網站上放置音頻和視頻的最佳方式是什麼? (what's the current best way to put audio and video on a web site?)


問題描述

當前在網站上放置音頻和視頻的最佳方式是什麼? (what's the current best way to put audio and video on a web site?)

I'm working on a very small site, with almost zero budget as a favor for a friend. She wants to put a short audio and video clip on the site (both clips are under two minutes). The audio is currently a 1.6 MB AAC (.m4a) and the video is a 30 MB H.264 (.mov).

What's the current best practice that's going to be the easiest for me, while still creating a good experience for the users? Should we upload the video to youtube or vimeo and embed? There's probably some simple audio player I could download. I have flash, so could make an FLV; I could convert the m4a to an mp3, etc. I could just link directly to the raw files....

‑‑‑‑‑

參考解法

方法 1:

Outsource it.

  • Youtube
  • Blip.tv (FAQ)
  • Vimeo (Basics)

Many popular video sites use Blip.tv

  • Thatguywiththeglasses
  • Cinemassacre

And others use Youtube

  • Screwattack

方法 2:

In terms of being modern and standards compliant for video embedding, Video for Everyone is probably the best way.

<!‑‑ “Video for Everybody” by Kroc Camen <camendesign.com> cc‑by ‑‑>
<video width="640" height="480" controls="controls">
    <source src="__MY_VIDEO__.ogv" type="video/ogg" />
    <source src="__MY_VIDEO__.mp4" type="video/mp4" />
    <object width="640" height="500" type="application/x‑shockwave‑flash"
        data="__FLASH_PLAYER__.swf" flashvars="file=__MY_VIDEO__.mp4"
    >   <param name="movie" value="__FLASH_PLAYER_.swf" />
        <param name="flashvars" value="file=__MY_VIDEO__.mp4" />
        <!‑‑[if gt IE 6]>
        <object width="640" height="495" classid="clsid:02BF25D5‑8C17‑4B23‑BC80‑D3488ABDDC6B">
            <param name="src" value="__MY_VIDEO__.mp4" /><!
        [endif]‑‑><!‑‑[if gt IE 6]><!‑‑>
        <object width="640" height="495" type="video/quicktime" data="__MY_VIDEO__.mp4"
        >   <param name="src" value="__MY_VIDEO__.mp4" />
        <!‑‑<![endif]‑‑><p>
            <strong>No video playback capabilities detected.</strong>
            Why not try to download the file instead?<br />
            <a href="__MY_VIDEO__.mp4">MPEG4 / H.264 “.mp4” (Windows / Mac)</a> |
            <a href="__MY_VIDEO__.ogv">Ogg Theora &amp; Vorbis “.ogv” (Linux)</a>
        </p><!‑‑[if gt IE 6]><!‑‑></object><!‑‑<![endif]‑‑>
        <!‑‑[if gt IE 6]></object><![endif]‑‑>
    </object>
</video>

A fully commented version is available at the link above.

This uses the video tag if it's supported, but as Firefox and Safari both support different formats (Ogg and Mp4) you need to have a couple of different versions of the video files.

This works on every browser, from IE6 to the iPhone, and from Chrome to Opera including everything in between.

For audio, the audio tag is the most modern, though I'm not sure about browser support at the moment.

方法 3:

Uploading to a service like YouTube, Blip.tv, or Vimeo is good, but you'll have to settle for them tossing in "related videos" or other ads on your content, and you'll be forced to stick with their player/branding.

You could get the JW FLV Media Player, and play the .mov through flash. And actually, if you go with blip, they will host the file and give you the absolute path to the .flv itself ‑ meaning you could load it directly into your local copy of JW FLV Player, and likely bypass their ads/related content.

Another nifty thing to consider would be the jQuery Media Player. It quickly converts markup/css into a media‑player driven by the powerful jQuery framework. Using this with the free hosting provided by Blip.tv (who again give you direct access to your .flv files) would be a great solution too.

方法 4:

for the video, I recommend to use youtube. you can embed into your pages without sacrificing spaces and bandwith. 

For the sound, i would recommend to use mp3 (not aac since not everybody has aac) and then you can put flash mp3 player (try this : 5 best flash podcast players)

For mp3, if it is a speech or just human talking about something, you don't need to make stereo, mono is more than enough. You can edit using Audacity (free‑open source software). I guest (from my past experience) 1 hour speech could be 5‑6 MB mono mp3 (about 96Kbps if i am not wrong)

(by sprugmanÓlafur WaageRich BradshawSampsonnightingale2k1)

參考文件

  1. what's the current best way to put audio and video on a web site? (CC BY‑SA 3.0/4.0)

#video #audio #html






相關問題

當前在網站上放置音頻和視頻的最佳方式是什麼? (what's the current best way to put audio and video on a web site?)

相當於PNG的視頻? (Video equivalent of PNG?)

IOS - UISaveVideoAtPathToSavedPhotosAlbum 如何返回保存的視頻路徑? (IOS -how could UISaveVideoAtPathToSavedPhotosAlbum return the saved video path?)

如何使用 c# 編寫一個簡單的視頻播放器,以準確的 fps 播放視頻? (How to use c# to write a simple video player which plays the video with accurate fps?)

Monotouch - MoviePlayer 永遠不會超越“正在加載...” (Monotouch - MoviePlayer never gets beyond "loading...")

Android MediaMetadataRetriever setDataSource 失敗 (Android MediaMetadataRetriever setDataSource failed)

枚舉Windows上所有可用視頻編解碼器的最佳方法? (Best way to enumerate all available video codecs on Windows?)

如何通過上傳單個視頻文件為任何 html5 視頻獲得多種質量(360p、480p、720p)選擇 (how can i get multiple quality(360p,480p, 720p) selection for any html5 video with uploading single video file)

由於不支持的編解碼器,FFmpeg/Avconv 無法複製字幕? (FFmpeg/Avconv unable to copy subtitles due to unsupported codec?)

嵌入 youtube 視頻響應解決方案 (embed youtube video responsive solution)

如何輕鬆識別流是視頻還是圖片【ffmpeg庫】 (How to easily recognize whether stream is video or image [ffmpeg library])

livestream.com 如何顯示存檔的視頻? (how is livestream.com displaying the archived video(s)?)







留言討論