3f:null 40:["$","title",null,{"children":"videojs | zq | Observable"}] 46:T4ce,ReactApp = () => { const playerRef = React.useRef(null); const videoJsOptions = { // lookup the options in the docs for more options autoplay: true, controls: true, responsive: true, fluid: true, sources: [{ src: sources[0], type: "application/x-mpegURL" }] } const handlePlayerReady = (player) => { playerRef.current = player; // you can handle player events here player.on('waiting', () => { console.log('player is waiting'); }); player.on('dispose', () => { console.log('player will dispose'); }); }; // const changePlayerOptions = () => { // // you can update the player through the Video.js player instance // if (!playerRef.current) { // return; // } // // [update player through instance's api] // playerRef.current.src([{src: 'http://ex.com/video.mp4', type: 'video/mp4'}]); // playerRef.current.autoplay(false); // }; const e = React.createElement; return e(React.Fragment,null, e('div',null,'Rest of app here'), e(VideoJS,{ options:videoJsOptions, onReady:handlePlayerReady }), e('div',null,'Rest of app here') ); }47:T497, VideoJS = ( props ) => { const videoRef = React.useRef(null); const playerRef = React.useRef(null); const { options, onReady } = props; React.useEffect(() => { // make sure Video.js player is only initialized once if (!playerRef.current) { const videoElement = videoRef.current; if (!videoElement) return; const player = playerRef.current = videojs(videoElement, options, () => { console.log("player is ready"); onReady && onReady(player); }); } else { // you can update player here [update player through props] // const player = playerRef.current; // player.autoplay(options.autoplay); // player.src(options.sources); } }, [options, videoRef]); // Dispose the Video.js player when the functional component unmounts React.useEffect(() => { const player = playerRef.current; return () => { if (player) { player.dispose(); playerRef.current = null; } }; }, [playerRef]); return React.createElement('div',{dataVjsPlayer:true},React.createElement('video',{ ref:videoRef, className:"video-js vjs-big-play-centered" }) ); }48:Tf86,hans=({ "Play": "播放", "Pause": "暂停", "Current Time": "当前时间", "Duration": "时长", "Remaining Time": "剩余时间", "Stream Type": "媒体流类型", "LIVE": "直播", "Loaded": "加载完成", "Progress": "进度", "Fullscreen": "全屏", "Non-Fullscreen": "退出全屏", "Picture-in-Picture": "画中画", "Exit Picture-in-Picture": "退出画中画", "Mute": "静音", "Unmute": "取消静音", "Playback Rate": "播放速度", "Subtitles": "字幕", "subtitles off": "关闭字幕", "Captions": "内嵌字幕", "captions off": "关闭内嵌字幕", "Chapters": "节目段落", "Close Modal Dialog": "关闭弹窗", "Descriptions": "描述", "descriptions off": "关闭描述", "Audio Track": "音轨", "You aborted the media playback": "视频播放被终止", "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。", "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。", "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。", "No compatible source was found for this media.": "无法找到此视频兼容的源。", "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。", "Play Video": "播放视频", "Close": "关闭", "Modal Window": "弹窗", "This is a modal window": "这是一个弹窗", "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。", ", opens captions settings dialog": ", 开启标题设置弹窗", ", opens subtitles settings dialog": ", 开启字幕设置弹窗", ", opens descriptions settings dialog": ", 开启描述设置弹窗", ", selected": ", 选择", "captions settings": "字幕设定", "Audio Player": "音频播放器", "Video Player": "视频播放器", "Replay": "重新播放", "Progress Bar": "进度条", "Volume Level": "音量", "subtitles settings": "字幕设定", "descriptions settings": "描述设定", "Text": "文字", "White": "白", "Black": "黑", "Red": "红", "Green": "绿", "Blue": "蓝", "Yellow": "黄", "Magenta": "紫红", "Cyan": "青", "Background": "背景", "Window": "窗口", "Transparent": "透明", "Semi-Transparent": "半透明", "Opaque": "不透明", "Font Size": "字体尺寸", "Text Edge Style": "字体边缘样式", "None": "无", "Raised": "浮雕", "Depressed": "压低", "Uniform": "均匀", "Dropshadow": "下阴影", "Font Family": "字体库", "Proportional Sans-Serif": "比例无细体", "Monospace Sans-Serif": "单间隔无细体", "Proportional Serif": "比例细体", "Monospace Serif": "单间隔细体", "Casual": "舒适", "Script": "手写体", "Small Caps": "小型大写字体", "Reset": "重置", "restore all settings to the default values": "恢复全部设定至预设值", "Done": "完成", "Caption Settings Dialog": "字幕设定窗口", "Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口", "End of dialog window.": "结束对话窗口", "Seek to live, currently behind live": "尝试直播，当前为延时播放", "Seek to live, currently playing live": "尝试直播，当前为实时播放", "progress bar timing: currentTime={1} duration={2}": "{1}/{2}", "{1} is loading.": "正在加载 {1}。" })49:[] 44:{"id":"d36b151b205410af","slug":"videojs","title":"videojs","thumbnail":"6484cbc6c78456d087d681851941215a8904eb548e297dcea65b34436cb2cfad","access_level":"public","create_time":"$D2021-12-02T05:33:26.975Z","update_time":"$D2021-12-02T07:08:48.943Z","view_time":null,"first_public_time":"$D2021-12-02T07:13:35.595Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"84303fb81ad17f31","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":"starter_2024","bio":"","following":false},"version":144,"publish_version":144,"role":null,"authored":false,"authors":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"videojs","cells":[{"id":0,"value":"# videojs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"sources = [\n 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"## js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"jscontainer = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"player = videojs(jscontainer,{\n width:600,\n autoplay: true,\n controls: true,\n language:'zh-Hans',\n poster:'http://vjs.zencdn.net/v/oceans.png',\n sources: [\n {\n src:sources[0],\n type: \"application/x-mpegURL\"\n }\n ],\n liveTracker:{\n \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"## react","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"{\n let container = html`

`;\n ReactDOM.render(React.createElement(ReactApp),container)\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"## vue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"new Vue({\n components:{componentVideo},\n el:html`

`,\n data(){\n return {\n title:'标题',\n videoOptions: {\n autoplay: true,\n controls: true,\n language:'zh-Hans',\n poster:'http://vjs.zencdn.net/v/oceans.png',\n sources: [\n {\n src:'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',\n type: \"application/x-mpegURL\"\n }\n ],\n liveTracker:{\n\n }\n }\n }\n }\n}).$el","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"componentVideo = ({\n template:`\n

\n`,\n props: {\n options: {\n type: Object,\n default() {\n return {};\n }\n }\n },\n watch:{\n options:{\n handler(newName, oldName) {\n //切换视频源\n if(newName.sources[0].src !== this.player.src()){\n this.player.src(newName.sources[0].src)\n }\n },\n // 深度监听\n deep: true,\n //immediate: true // 立刻调用一次\n }\n },\n created(){\n this.player = null;\n },\n methods:{\n },\n data() {\n return {\n }\n },\n mounted() {\n this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {\n console.log('onPlayerReady', this);\n })\n },\n beforeDestroy() {\n if (this.player) {\n this.player.dispose()\n this.player = null;\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"## lib","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"videojs = require(\"https://unpkg.com/video.js@7.17.0/dist/video.js\").then(v=>{\n \n v.addLanguage('zh-Hans', hans);\n return v;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Vue = require(\"vue\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"React = require('https://unpkg.com/react@17.0.2/umd/react.development.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"ReactDOM = require.alias({react:React})('https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"