Công ty của tôi đang bắt đầu thực hiện một số lượng lớn video hướng dẫn/đào tạo trực tuyến, được hiển thị nội dòng trên trang web. Chúng tôi cần một giải pháp trình duyệt chéo đơn giản có thể chứa phần lớn người dùng để xem nội tuyến.Giải pháp video nội tuyến tương thích trình duyệt chéo
Một giải pháp mà tôi đã đọc (không đơn giản), là tạo phiên bản flash, mp4 và avi của mỗi video và để plugin javascript xác định trình duyệt nào hoạt động tốt nhất.
Đối với một giải pháp thương mại kiểm tra http://www.sublimevideo.net/
Đối với miễn phí kiểm tra http://www.videojs.com/
tôi cũng sử dụng http://www.videojs.com/ và cách dễ nhất để thực hiện công việc này .. +1 –
Bạn đã kiểm tra bất kỳ plugin JQuery? Có rất nhiều ở đó, làm việc tốt qua trình duyệt. Bạn có thể kiểm tra http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Tôi đã thử nghiệm một chút về việc phát video trên tất cả các trình duyệt. Cách tốt nhất để làm điều này là thiết lập thẻ video html5 với dự phòng flash. Điều này thực sự không yêu cầu bất kỳ javascript để làm việc. Trang web này: http://camendesign.com/code/video_for_everybody cung cấp giải thích tuyệt vời về cách thực hiện việc này.
Bạn sẽ muốn thiết lập một cái gì đó lên rằng về cơ bản trông như thế này:
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari/iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox/Opera/Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
Thẻ video là một thẻ html5 mà bạn có thể sử dụng để hiển thị các file video trên các trình duyệt hiện đại. Tuy nhiên, bạn sẽ cần một vài định dạng khác nhau để hiển thị nó đúng trong mỗi định dạng. Ví dụ, Firefox chỉ có định dạng webm và ogg trong khi Safari chỉ có định dạng h264 và mp4. Đây là một bài viết tuyệt vời về điều này: http://diveintohtml5.ep.io/video.html. Một phần mềm chuyển đổi đơn giản mà bạn có thể tải xuống để chuyển đổi video của mình thành tất cả các định dạng này có thể tìm thấy tại đây: http://www.mirovideoconverter.com/. Các trình duyệt khác (đặc biệt là IE) không dùng thẻ video html5 vì vậy thay vào đó bạn phải bao gồm một định dạng flash mà nó sẽ tự động quay trở lại nếu nó không biết phải làm gì với thẻ video.
Cuối cùng, bạn sẽ phải tạo ít nhất 3-4 định dạng khác nhau của một tệp video để làm việc này trên các trình duyệt và nền tảng (iOS di động) do thiếu các tiêu chuẩn tương thích. Nó cũng quan trọng để đảm bảo máy chủ của bạn đang sử dụng đúng loại mime cho các định dạng này. Nó hút nhưng bây giờ đó là cách duy nhất.
Giải pháp tốt nhất cho đến nay:
Làm thế nào để thực hiện:
đầu:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
cơ thể:
<div class="vid">
<video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="640px" height="264px"
poster="../../Content/YourInitialPicture.jpg">
<source src="../../Content/YourVideo.mp4" type='video/mp4'/> <!-- IE/Safari -->
<source src="../../Content/YourVideo.webm" type='video/webm'/> <!-- Mozilla FF -->
<source src="../../Content/YourVideo.ogg" type='video/ogg'/> <!-- Chrome/Opera -->
<track kind="captions" src="../../Content/YourVideoCaption.vtt" srclang="en" label="English" />
</video>
<script>
var myPlayer = _V_("vid01");
</script>
</div>
Copy/Paste trên mã để <body></body> của bạn và thêm đường của video của bạn để src="../../"
bạn có thể sử dụng các quy ước miễn phí này cho video của bạn.
đơn giản như thế này!
Giải pháp tốt. Ngoài ra công cụ chuyển đổi video được đề xuất đầu tiên cũng rất đẹp. – Alex
Điều gì đã hiệu quả đối với tôi: Tôi đã tải video lên YouTube rồi tải video xuống dưới dạng MP4 và có vẻ như hoạt động trên các trình duyệt có thẻ video.
Bạn có thể sử dụng ffmpeg nếu bạn chỉ muốn chuyển đổi nó sang mp4. – Octopus
Tôi đã nghiên cứu điều này trong một thời gian và tôi đang cố gắng làm điều tương tự, vì vậy hy vọng điều này sẽ giúp người khác. Tôi đã sử dụng crossbrowsertesting.com và nghĩa đen kiểm tra điều này trong hầu như mọi trình duyệt được biết đến với con người. Giải pháp mà tôi hiện đang làm việc trong Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.
Nguồn thay đổi động
Tự động thay đổi video rất khó và với dự phòng Flash, bạn sẽ phải xóa video khỏi DOM/trang và thêm lại video để Flash sẽ cập nhật vì Flash sẽ không nhận ra động cập nhật cho Flash vars. Nếu bạn định sử dụng JavaScript để thay đổi động, tôi sẽ xóa hoàn toàn tất cả các phần tử <source> và chỉ sử dụng canPlayType để đặt src trong JavaScript và break hoặc return sau loại video được hỗ trợ đầu tiên và không quên tự động cập nhật flash var mp4. Ngoài ra, một số trình duyệt sẽ không đăng ký mà bạn đã thay đổi nguồn trừ khi bạn gọi video.load(). Tôi tin rằng vấn đề với .load() bạn đang gặp phải có thể được khắc phục bằng cách gọi điện thoại số video.pause() trước tiên. Việc xóa và thêm yếu tố video có thể làm chậm trình duyệt vì nó tiếp tục lưu vào bộ đệm video bị xóa, nhưng there's a workaround.
Cross-trình duyệt hỗ trợ
Theo như phần qua trình duyệt thực tế, tôi đến Video For Everybody là tốt. Tôi đã thử các plugin MediaelementJS Wordpress, mà hóa ra để gây ra rất nhiều vấn đề hơn nó giải quyết. Tôi nghi ngờ các vấn đề là do trình cắm thêm Wordpress và không phải là thư viện thực sự. Tôi đang cố gắng tìm một cái gì đó hoạt động mà không cần JavaScript, nếu có thể. Cho đến nay, những gì tôi đã đưa ra là HTML này đơn giản:
<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
<img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>
Ghi chú quan trọng:
<source> đầu tiên vì Mac OS Firefox bỏ cố gắng để chơi video nếu nó gặp MP4 dưới dạng <source> đầu tiên.video/ogg, khôngvideo/ogv.iphone.mp4 là dành cho iPhone 4+ mà sẽ chỉ phát video MPEG-4 với âm thanh H.264 Baseline 3 Video và AAC. Bộ chuyển mã tốt nhất tôi tìm thấy cho định dạng đó là Handbrake, sử dụng cài đặt trước iPhone & Cài đặt iPod Touch sẽ hoạt động trên iPhone 4+, nhưng để iPhone 3GS hoạt động, bạn cần sử dụng cài đặt trước iPod có độ phân giải thấp hơn nhiều được thêm dưới dạng video.iphone3g.mp4.media trên các yếu tố <source> để nhắm mục tiêu thiết bị di động có truy vấn phương tiện nhưng hiện tại các thiết bị Apple và Android cũ hơn không hỗ trợ đủ.
Có định dạng video được dự định là chuẩn trong tương lai cho html5 không? –
Nếu Apple hỗ trợ định dạng WebM nó có thể xảy ra trong tương lai gần vì tôi tin rằng IE9 hiện hỗ trợ WebM nhưng rất nghi ngờ họ sẽ làm điều đó khi chúng được gắn chặt với định dạng H264 độc quyền. –