- \n
- Video.js \u4f7f\u7528\u7b46\u8a18\uff1a\u4e2d\u6587\u4ecb\u9762\u3001\u53d6\u503c\u3001\u4e8b\u4ef6\u3001\u6539\u6a23\u5f0f - API - Let's Write (letswrite.tw)<\/a><\/li>\n
- Day26 Video.js \u64ad\u653e\u5668 - iT \u90a6\u5e6b\u5fd9::\u4e00\u8d77\u5e6b\u5fd9\u89e3\u6c7a\u96e3\u984c\uff0c\u62ef\u6551 IT \u4eba\u7684\u4e00\u5929 (ithome.com.tw)<\/a><\/li>\n<\/ul>\n
--<\/p>\n
\u57fa\u672c\u4f7f\u7528<\/h2>\n
\u5982\u679c\u6709 data-setup=\"{}\" \u5c31\u6703\u81ea\u52d5\u8f09\u5165<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n <link href=\"https:\/\/vjs.zencdn.net\/8.3.0\/video-js.css\" rel=\"stylesheet\"\/>\r\n <script src=\"https:\/\/vjs.zencdn.net\/8.3.0\/video.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<video id=\"video-js\" class=\"video-js vjs-fluid\" data-setup=\"{}\" controls=\"controls\" preload=\"auto\" controlsList=\"nodownload\">\r\n <source src=\"RAIN.mkv\" type=\"video\/mp4\"\/>\r\n <p class=\"vjs-no-js\">\u60a8\u7684\u700f\u89bd\u5668\u4e0d\u652f\u63f4 Javascript<\/p>\r\n<\/video>\r\n\r\n<\/body>\r\n<\/html><\/pre>\nJavascript \u8f09\u5165<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n <link href=\"https:\/\/vjs.zencdn.net\/8.3.0\/video-js.css\" rel=\"stylesheet\"\/>\r\n <script src=\"https:\/\/vjs.zencdn.net\/8.3.0\/video.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<video id=\"video-js\" class=\"video-js vjs-fluid\" controls=\"controls\" preload=\"auto\" controlsList=\"nodownload\">\r\n <source src=\"RAIN.mkv\" type=\"video\/mp4\"\/>\r\n <p class=\"vjs-no-js\">\u60a8\u7684\u700f\u89bd\u5668\u4e0d\u652f\u63f4 Javascript<\/p>\r\n<\/video>\r\n\r\n<script>\r\n videojs('video-js', {\r\n controls: true,\r\n autoplay: false,\r\n preload: 'auto',\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n--<\/p>\n
MP4\/M3U8<\/h2>\n
- \n
- m3u8-video-js (codepen.io)<\/a><\/li>\n<\/ul>\n
\u5f9e 7.x \u958b\u59cb\u5f88\u591a\u5916\u639b\u5c31\u6703\u5167\u5efa\uff0c\u5982\u679c\u4e0d\u9700\u8981\u53ef\u4ee5\u9078\u64c7 video.core.min.js \u7248\u672c<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n <!-- bootstrap 5 -->\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/vjs.zencdn.net\/8.3.0\/video-js.css\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/unpkg.com\/@videojs\/themes@1\/dist\/fantasy\/index.css\" rel=\"stylesheet\"\/>\r\n <style>\r\n html,body{\r\n height: 100%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" style=\"height: 100%;\">\r\n <div class=\"row align-items-center\" style=\"height: 100%;\">\r\n <div class=\"col-xs-12\">\r\n <div>\r\n <video id=\"my-player\" class=\"video-js vjs-fluid vjs-theme-fantasy\">\r\n <source src=\"https:\/\/bitdash-a.akamaihd.net\/content\/sintel\/hls\/playlist.m3u8\"\/>\r\n <p class=\"vjs-no-js\">\u60a8\u7684\u700f\u89bd\u5668\u4e0d\u652f\u63f4 Javascript<\/p>\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/vjs.zencdn.net\/8.3.0\/video.min.js\"><\/script>\r\n<script>\r\n videojs('my-player', {\r\n controls: true,\r\n autoplay: false,\r\n preload: 'none',\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2018\/10\/2023-06-13-15-11-12.png\")
<\/p>\n--<\/p>\n
\u5b57\u5e55<\/h2>\n
- Day26 Video.js \u64ad\u653e\u5668 - iT \u90a6\u5e6b\u5fd9::\u4e00\u8d77\u5e6b\u5fd9\u89e3\u6c7a\u96e3\u984c\uff0c\u62ef\u6551 IT \u4eba\u7684\u4e00\u5929 (ithome.com.tw)<\/a><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2018\/10\/Image-073.png\")
<\/p>\n![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2018\/10\/Image-074.png\")
<\/p>\n