2008-08-01 46 views
52

Chúng tôi đang sử dụng WMV video trên trang web nội bộ và chúng tôi đang nhúng chúng vào các trang web. Điều này hoạt động khá tốt trên Internet Explorer, nhưng không hoạt động trên Firefox. Tôi đã tìm cách để làm cho nó hoạt động trong Firefox, nhưng sau đó nó ngừng hoạt động trong Internet Explorer.Nhúng Windows Media Player cho tất cả các trình duyệt

Chúng tôi chưa muốn sử dụng Silverlight, đặc biệt vì chúng tôi không thể chắc chắn rằng tất cả khách hàng sẽ chạy Windows XP với Windows Media Player được cài đặt.

Có loại mã phổ quát nào nhúng WMP vào cả Internet Explorer và Firefox hay chúng ta cần thực hiện một số phát hiện tác nhân người dùng và phân phối HTML khác nhau cho các trình duyệt khác nhau?

+0

Giải pháp trình duyệt chéo luôn hoạt động ... Cách phát trực tuyến âm nhạc hoặc âm thanh từ trang web của bạn: http://nunzioweb.com/streaming_audio-example.htm –

Trả lời

41

Các công trình sau đây dành cho tôi trong Firefox và Internet Explorer:

<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="320" height="310"> 
<param name="filename" value="./test.wmv"> 
    <param name="animationatstart" value="true"> 
    <param name="transparentatstart" value="true"> 
    <param name="autostart" value="true"> 
    <param name="showcontrols" value="true"> 
    <param name="ShowStatusBar" value="true"> 
    <param name="windowlessvideo" value="true"> 
    <embed src="./test.wmv" autostart="true" showcontrols="true" showstatusbar="1" bgcolor="white" width="320" height="310"> 
</object> 
+0

Khi tôi sử dụng phương pháp này, tôi không thể điều khiển trình phát thông qua JavaScript. Ví dụ: mediaplayer.controls không được xác định. Có một cách trình duyệt chéo mà cũng cho phép điều này? –

+1

đó là vì 'đối tượng' có' id' nhưng phần tử 'embed' đang được chạy. Bạn nên làm cho cả hai yếu tố là một lớp "duy nhất", chọn cả hai và lọc ra một phần đang hoạt động. – zzzzBov

+3

Tâm trí, kể từ phiên bản 7.0, id lớp đã được đổi thành 6BF52A52-394A-11d3-B153-00C04F79FAA6. Xem ví dụ [ở đây] (https://www.microsoft.com/windows/windowsmedia/howto/articles/adsolutions2.aspx). – Simon

5

Bạn có thể sử dụng ý kiến ​​có điều kiện để có được IE và Firefox để làm những việc khác nhau

<![if !IE]> 
<p> Firefox only code</p> 
<![endif]> 

<!--[if IE]> 
<p>Internet Explorer only code</p> 
<![endif]--> 

Các trình duyệt mình sẽ bỏ qua mã mà không có nghĩa là cho họ để đọc.

6

Cách tốt nhất để triển khai video trên web là sử dụng Flash - việc nhúng trực tiếp vào trang web dễ dàng hơn và sẽ chơi nhiều hơn hoặc ít hơn bất kỳ kết hợp trình duyệt và nền tảng nào. Lý do duy nhất để sử dụng Windows Media Player là nếu bạn đang phát trực tuyến nội dung và bạn cần quản lý quyền kỹ thuật số cực kỳ mạnh, và thậm chí sau đó các nhà cung cấp hiện đang bắt đầu sử dụng Flash ngay cả đối với những điều này. Xem iPlayer của BBC để có một ví dụ tuyệt vời.

Tôi khuyên bạn nên chuyển sang Flash ngay cả khi sử dụng nội bộ. Bạn không bao giờ biết ai sẽ cần truy cập nó trong tương lai, và điều này sẽ cho bạn khả năng tương thích tốt nhất trong tương lai.

EDIT - ngày 20 tháng 3 năm 2013. Thú vị về những câu hỏi cũ này thỉnh thoảng nổi lên như thế nào! Làm thế nào khác nhau trên thế giới là ngày hôm nay và làm thế nào ngày này tất cả dường như. Tôi sẽ không đề xuất một tuyến đường Flash duy nhất ngày hôm nay bằng bất kỳ phương tiện nào - thực hành tốt nhất những ngày này có thể sẽ sử dụng HTML 5 để nhúng video được mã hóa H264, với dự phòng Flash như được mô tả tại đây: http://diveintohtml5.info/video.html

+0

id nói đây là một nhận xét ngây thơ iPlayer có dễ dàng tương tác với các sản phẩm khác chủ yếu là vì "DRM" của họ chỉ đơn giản là một trường hợp làm việc trong đó một người nào đó thông qua GeoIP. Flash thật may mắn vì nó không có sự cạnh tranh với ngôn ngữ lập trình bậc 3 và thời gian chạy không hoàn hảo -1 cách quá chủ quan, câu hỏi đặt ra là hỏi cách nhúng WMP vào tất cả các trình duyệt ... Flash có liên quan gì đến điều đó ??? – Matt

+0

Đó là một cách tiếp cận thay thế - điều gì ngây thơ về việc đề xuất các lựa chọn thay thế? – Polsonby

+0

Có thể không còn đúng nữa, bây giờ chúng ta có HTML5. –

4

Video flash mã hóa thực sự rất dễ dàng với ffmpeg. Bạn có thể sử dụng một lệnh để chuyển đổi từ bất kỳ định dạng video nào, ffmpeg đủ thông minh để tìm ra phần còn lại, và nó sẽ sử dụng mọi bộ xử lý trên máy của bạn. Gọi nó rất dễ dàng:

ffmpeg -i input.avi output.flv 

ffmpeg sẽ đoán ở tốc độ bit mà bạn muốn, nhưng nếu bạn muốn chỉ định, bạn có thể sử dụng tùy chọn -b, vì vậy -b 500000 là 500kbps ví dụ. Có rất nhiều lựa chọn của khóa học, nhưng tôi thường nhận được kết quả tốt mà không có nhiều tinkering. Đây là một nơi tốt để bắt đầu nếu bạn đang tìm kiếm thêm tùy chọn: video options.

Bạn không cần máy chủ web đặc biệt để hiển thị video flash. Tôi đã thực hiện tốt bằng cách chỉ cần đẩy các tệp .flv lên máy chủ web chuẩn và liên kết với chúng bằng trình phát swf tốt, như flowplayer.

WMV là tốt nếu bạn có thể chắc chắn rằng tất cả người dùng của bạn sẽ luôn sử dụng [phiên bản mới nhất, cập nhật của] chỉ Windows, nhưng thậm chí sau đó, Flash thường phù hợp hơn với web. Người chơi thậm chí cực kỳ skinnable và có thể được điều khiển bằng javascript.

20

Tôi có thể đề xuất số jQuery Media Plugin không?Cung cấp mã nhúng cho tất cả các loại video, không chỉ WMV và phát hiện trình duyệt, giữ tất cả các câu lệnh chuyển đổi/trường hợp lộn xộn đó ra khỏi các mẫu của bạn.

7

Elizabeth Castro có một bài viết thú vị về vấn đề này: Bye Bye Embed. Đáng đọc về cách cô ấy tấn công vấn đề này, cũng như xử lý nội dung QuickTime.

8

Sử dụng các mục sau. Nó hoạt động trong Firefox và Internet Explorer.

 <object id="MediaPlayer1" width="690" height="500" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
      codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" 
      standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject" 
      > 
      <param name="FileName" value='<%= GetSource() %>' /> 
      <param name="AutoStart" value="True" /> 
      <param name="DefaultFrame" value="mainFrame" /> 
      <param name="ShowStatusBar" value="0" /> 
      <param name="ShowPositionControls" value="0" /> 
      <param name="showcontrols" value="0" /> 
      <param name="ShowAudioControls" value="0" /> 
      <param name="ShowTracker" value="0" /> 
      <param name="EnablePositionControls" value="0" /> 


      <!-- BEGIN PLUG-IN HTML FOR FIREFOX--> 
      <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
       src='<%= GetSource() %>' align="middle" width="600" height="500" defaultframe="rightFrame" 
       id="MediaPlayer2" /> 

Và trong JavaScript,

function playVideo() { 
     try{ 
       if(-1 != navigator.userAgent.indexOf("MSIE")) 
       { 
         var obj = document.getElementById("MediaPlayer1"); 
          obj.Play(); 

       } 
       else 
       { 
          var player = document.getElementById("MediaPlayer2"); 
          player.controls.play(); 

       } 
      } 
     catch(error) { 
      alert(error) 
     } 


     } 
3

Tôi đã tìm thấy một cái gì đó mà thực tế làm việc trong cả FireFox và IE, trên trang web của Elizabeth Castro (nhờ các liên kết trên trang web này) - Tôi đã thử tất cả các khác các phiên bản ở đây, nhưng không thể làm cho họ làm việc trong cả hai trình duyệt

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" 
    id="player" width="320" height="260"> 
    <param name="url" 
    value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" /> 
    <param name="src" 
    value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" /> 
    <param name="showcontrols" value="true" /> 
    <param name="autostart" value="true" /> 
    <!--[if !IE]>--> 
    <object type="video/x-ms-wmv" 
    data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" 
    width="320" height="260"> 
    <param name="src" 
     value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" /> 
    <param name="autostart" value="true" /> 
    <param name="controller" value="true" /> 
    </object> 
    <!--<![endif]--> 
</object> 

Kiểm tra trang web của mình ra: http://www.alistapart.com/articles/byebyeembed/ và phiên bản với classid trong thẻ đối tượng ban đầu

4

Tôi đã tìm thấy một bài viết hay về using the WMP with Firefox trên MSDN.

Dựa trên bài viết của MSDN và sau khi thực hiện một số thử nghiệm và lỗi, tôi thấy sử dụng JavaScript tốt hơn sử dụng bình luận có điều kiện hoặc thẻ "EMBED/OBJECT" lồng nhau.

tôi đã thực hiện một chức năng JS tạo ra đối tượng WMP dựa trên lập luận đưa ra:

<script type="text/javascript"> 
    function generateWindowsMediaPlayer(
     holderId, // String 
     height,  // Number 
     width,  // Number 
     videoUrl // String 
     // you can declare more arguments for more flexibility 
     ) { 
     var holder = document.getElementById(holderId); 

     var player = '<object '; 
     player += 'height="' + height.toString() + '" '; 
     player += 'width="' + width.toString() + '" '; 

     videoUrl = encodeURI(videoUrl); // Encode for special characters 

     if (navigator.userAgent.indexOf("MSIE") < 0) { 
      // Chrome, Firefox, Opera, Safari 
      //player += 'type="application/x-ms-wmp" '; //Old Edition 
      player += 'type="video/x-ms-wmp" '; //New Edition, suggested by MNRSullivan (Read Comments) 
      player += 'data="' + videoUrl + '" >'; 
     } 
     else { 
      // Internet Explorer 
      player += 'classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" >'; 
      player += '<param name="url" value="' + videoUrl + '" />'; 
     } 

     player += '<param name="autoStart" value="false" />'; 
     player += '<param name="playCount" value="1" />'; 
     player += '</object>'; 

     holder.innerHTML = player; 
    } 
</script> 

Sau đó, tôi đã sử dụng chức năng đó bằng cách viết một số đánh dấu và inline JS như thế này:

<div id='wmpHolder'></div> 

<script type="text/javascript">   
    window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext')); 
</script> 

Bạn có thể sử dụng jQuery.ready thay vì sự kiện tải cửa sổ to ma vua mã hơn tương thích ngược và trình duyệt chéo.

Tôi đã thử nghiệm mã qua IE 9-10, Chrome 27, Firefox 21, Opera 12 và Safari 5, trên Windows 7/8.

+2

Tác phẩm này hoạt động nhưng trong Firefox toàn bộ video được tải xuống trước khi video bắt đầu phát. Rõ ràng điều này tạo ra một màn hình tải khá dài. Có cách nào để có luồng video này trong Firefox không? – MNRSullivan

+0

Thật không may tôi đã không tìm cách để ngăn chặn vấn đề này. Rõ ràng, đây là bản chất của đối tượng WMP trên Firefox. Vì lý do này, tôi sử dụng ** sự kiện tải của cửa sổ **, vì đây là điểm mới nhất (thời điểm) của việc đánh dấu trang (tài nguyên) của trang. Đặt thuộc tính ** data ** sau khi tải trang, có thể giảm thời gian tải (rõ ràng không phải 100%!). Chúc may mắn. – Perseus

+1

Tôi tìm thấy một giải pháp. Đã thay đổi loại trình phát firefox thành video/x-ms-wmv. Tôi cũng nhận thấy rằng firefox và chrome không thể phát video có không gian trong tiêu đề. Tôi đã sửa lỗi này bằng cách thay thế tất cả các khoảng trống trong chuỗi videoURL bằng '% 20' và sau đó nó hoạt động tốt – MNRSullivan

Các vấn đề liên quan