編寫html5視頻播放器需要用到一些代碼,下面是一個(gè)完整的代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5視頻播放器示例</title> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup='{"example_option":true}'> <source src="my-video.mp4" type="video/mp4"> <source src="my-video.webm" type="video/webm"> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a target="_blank">supports HTML5 video</a> </p> </video> <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script> <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> <script src="https://vjs.zencdn.net/7.14.3/plugins/hls.min.js"></script> <script> videojs('my-video', { html5: { hls: { overrideNative: true } } }); </script> </body> </html>
上面的代碼包含了一個(gè)HTML5視頻播放器的完整代碼。其中,video標(biāo)簽用于嵌入視頻,通過(guò)設(shè)置id和class屬性,可以對(duì)視頻進(jìn)行自定義樣式的設(shè)置。source標(biāo)簽用于指定視頻文件的來(lái)源和格式。
在